This is the website, and more specifically, the page.
I'm currently working on a responsive theme, which has media queries, but something about the CSS modifications I've made, are preventing the menu (top right in gold), and the sidebar (this only exists on the blog page, but it is important... it's the box at the right of the content block) from merging with the header/title/left-hand content. It shows up on the ipad mini, the regular ipad 4, but it is okay in an android browser screen. You can observe the issue by resizing the browser.
#media only screen and (min-width:768px) {
.site-navigation .nav-menu {
display: block;
}
}#media only screen and (max-width:767px) {
.menu-toggle {
display: block;
}
}#media only screen and (min-width:768px) and (max-width:959px) {
.wrap {
max-width: 728px;
}
That is the media screen css. The respective divs are all positioned relatively. Does anyone have any advice on how to fix this problem? Any code tidbits?
The first thing I see is that this HTML is not closed:
<div id="header" onclick="location.href='http://camillagabrieli.com
That needs to be fixed first. Try adding outlines to your CSS:
* { outline: 1px dashed black }
I find that helps a lot when it comes to seeing what's actually wrong with the different floated elements. There are quite a few things wrong with your arrangement and your CSS. You don't need to relatively position all of these things.
To fix the main content section:
Add the following to #main:
overflow:hidden;
And make #content and #sidebar-primary like this:
#content {
float: left;
width: 75%;
margin-left: 40px;
margin-right: 10px;
margin-top: 10px;
min-height: 50px;
}
#sidebar-primary {
float: left;
width: 20%;
border-top: 1px solid #222;
border-bottom: 1px solid #222;
height: 50%;
}
I'm not sure why you had margin-top: -460px; in your code, but that was what was breaking it, as was the fact that #main wasn't actually containing #content and #sidebar-primary. The code still needs cleaning up, but this will fix it more immediately.
Does this help?
Related
I recently added a widget to my website header for desktop mode. I struggled getting this widget to be on the same line and off to the right of the logo, but I eventually got it. In the process, it appears I messed up how the header looks on mobile devices (refer to twoguysplayingzelda.com for an example). Since 65% of my viewership is via mobile, I would like to fix this but have not figured out how. I would like the logo to be centered, completely view-able, and the menu icon on the left side (it use to be before I made the change). I am aware that I need to add coding into the responsive section of my style.css. Below is what I currently have for my header in CSS (desktop section). I knew nothing about CSS and HTML before I started my website, so I am still somewhat of a noob. Thanks for your help
div#header-widget-area {
float: right;
}
.header {
padding-top: 10px;
padding-bottom: 60px;
color: #01B3D9;
}
.header .cover {
background: rgba(29,29,29,0.0);
}
.header-inner {
position: relative;
}
.header .blog-logo {
text-align: left;
}
.header .logo {
display: inline;
float: left;
}
.header .logo img {
max-height: 50px;
width:auto;
}
The menu icon is pushed to the right by the logo because they both have float: left.
Try to remove float: left from .logo, and add display: inline-block to .blog-logo. That should fix both of your issues.
I have tried 100 different ways to get the footer to stick to the bottom of the page. On all my other pages, it operates fine however on one page, the footer floats to the middle. This is the code I am trying to work but clearly something is off.
#media screen and (min-width : 768px) {
.page-id-94 html, body {
display: none;
}
.site, .site-content {
height: 100%;
}
#boldgrid-sticky-wrap {
min-height: 100%;
height: auto !important;
height: 100%;
}
}
I need this to execute in mobile/smaller screen versions only therefore I used the media query.
I am learning CSS as I go so all this is very new for me. All help is appreciated
Not sure what you're trying to do here, but this is how I usually do my footers:
.footer {
position: absolute;
bottom: 0;
width:100%;
height:20%; //you can hard code a px value for this
padding: 5px; //you may wish to change this as well
}
Hi guys i have a very weird problem. If you can see my navbar when resized to mobile size and click in drop down and again make it normal desktop size there is an increase in the navbar height. I wanted a horizontal justified menu for this i used
.menu_container>ul:after{
content: "";
padding-left: 100%;
visibility: hidden;
/* do not use float:left but the display:inline-block below!!! */
display: inline-block;
}
If I removed the content:"", it works fine but the justification of the menu goes off
This is my fiddle
Also attached screenshot for your reference
DEMO
Its because of height: auto; present in
#hidden_menu_collapser:checked + ul {
height: auto;
min-height: 40px;
max-height: 2999px;
background-color:
#FFF;
}
You need update the height:auto; to height: 44px !important; and update it in desktop media query, so that that extra space is removed.
#media only screen and (min-width: 768px) {
#hidden_menu_collapser:checked + ul {
min-height: 40px;
max-height: 2999px;
background-color: #FFF;
height: 44px !important;
}
}
You can just copy paste the above css to your file and it will work
First of all, here's the jsfiddle for the particular markup/styling in question.
Main question is why the img and text box (dark_block) do not have the same margin. Both are set to 100% width of the container div, so I'm not sure what's up. Mind taking a look?
Other things I'm still trying to figure out and googling (thus far) has not helped me:
When the text box is in-line (to the left) of the photo container, how do I get it to be the same height as the photo container
If the image's width is smaller than the photo container, how do I get it to center horizontally and vertically?
For accessibility sake, can I just create a non-responsive version of the css before the #media tag stuff?
Sorry, I'm sort of new to web development, and any help would definitely be appreciated. Also if anything in the code fragment seems awfully done, call me out! I'd love to learn some best-practices in addition to solving the issue at hand. Especially display types, having a hard time wrapping my head around 'em.
Appreciate you taking the time to look at this!
John
CODE:
<div id="home_top_container">
<div id="photo_slider">
<img src="redacted">
</div>
<div id="dark_block"></div>
</div>
#home_top_contianer {
width: 100%;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
}
#media screen and (min-width: 800px){
#photo_slider{
float:right;
background-color: #cccccc;
padding: 0px;
width: 69%;
min-width: 500px;
display: inline-block;
}
}
#media screen and (max-width: 799px){
#photo_slider{
float:none;
background-color: #cccccc;
padding: 0px;
width: 100%;
min-width: 500px;
display: inline-block;
}
}
#media screen and (min-width: 800px){
#dark_block {
float:left;
background-color: #383838;
padding: 10px;
width: 28%;
display: inline-block;
}
}
#media screen and (max-width: 799px){
#dark_block {
float:left;
background-color: #383838;
margin-top: 20px;
padding: 10px;
width: 100%;
min-height: 200px;
display: inline-block;
}
}
img {
max-width: 100%;
margin: 0px;
}
You need to read up on the CSS box model. The width of an element refers to its content. The padding, border and margin are then added it to it. That means your #dark_block is actually 100% + 2*10px wide.
The proper solution would be to set #dark_block to display: block and remove both floatand width. The default value for width is auto, which automatically makes the block as wide s possible without overflowing. Rule of thumb in web development: If you give a display: block element width: 100%, then you are doing something wrong.
Another simple solution would be to set box-sizing: border-box; on #dark_block, however box-sizing is a relatively new property, so it won't work if you need to support older browsers.
Getting them to the same height, is not a trivial thing. You could use the display: table-* properties, and give them height: 100% but that requires you to put #dark_block first in the HTML.
Quick example:
<div id="home_top_container">
<div>
<div id="dark_block"></div>
<div id="photo_slider">
<img src="http://caldwellfellows.ncsu.edu/wp/wp-content/uploads/2013/06/Justin-sews.jpg">
</div>
</div>
</div>
#home_top_container > div > div {
display: table-cell;
width: 50%;
border: 1px solid red;
}
img {
width: 100%;
}
Again centering vertically is not a trivial thing in CSS. Your best bet would be to use display: table-cell with vertical-align: middle.
Most certainly. Especially you should move all properties that are common to all media-variants to outside the media rules, so that you don't repeat them.
Also it's no need to repeat the media rules around each rule. Just have one media rule:
#media screen and (min-width: 800px) {
#photo_slider {
/* ... */
}
#dark_block {
/* ... */
}
}
#media screen and (max-width: 799px) {
#photo_slider {
/* ... */
}
#dark_block {
/* ... */
}
}
I'm trying to get the menu bar of an example on the tb website to be a constant height throughout and I ran into a bit of odd behavior.
In the following demo:
http://twitter.github.com/bootstrap/examples/fluid.html
If you resize your browser to about 1070/1080 px width, the bar jumps to an ugly height and then back down. It's as if there's a media query somewhere in the responsive css that hasn't accounted for a ~2px range in browser width. I'm using this as a baseline for my application and would absolutely appreciate any suggestions on how to get this fixed.
The issue comes from some page specific style (from fluid.html):
#media (max-width: 980px) {
.navbar-text.pull-right {
float: none;
padding-left: 5px;
padding-right: 5px;
}
}
vs some external CSS (from bootstrap-responsive.css):
#media (max-width: 979px) {
.nav-collapse .nav {
float: none;
margin: 0 0 10px;
}
}
As you can see, there is a 1px difference between those media-queries. If you were to edit the first to also use 979px, things would not jump any more.
There's a spot in there where .navbar-text.pull-right goes to {float: none} before .nav-collapse goes to {height: 0}. I'd look for that.
UPDATE: It's in the page styles:
#media (max-width: 980px) {
/* Enable use of floated navbar text */
.navbar-text.pull-right {
float: none;
padding-left: 5px;
padding-right: 5px;
}
}