Hi tja315,
1. I saw the issue on the first img of this post http://bestlittlenest.com/eat-gestational-diabetes-test/ That image is align to the left, edit the post and set the alignment to none. That´ll fix it.
2. Set the height to auto
#header {
height: auto;
}
Best regards
Thread Starter
tja315
(@tja315)
The header CSS doesn’t seem to have worked. I just added it to my Custom CSS and the logo is still overlapping with the menu bar on the mobile view.
Also, now my pages are back to the narrower/default width! Not sure how that just happened.
Here’s what’s in my Custom CSS field; see any reasons why the header wouldn’t be auto adjusting, or my pages are back to the default width?
/* navigation bar background */
#site-navigation ul {
background: #dd9933;
}
/* navigation items background */
#site-navigation #menu-main li {
background: #dd9933;
display: inline-block;
float: none;
}
/* navigation items hover background */
#site-navigation li:hover {
background-color: #ffffff;
}
.todocontenido div.focus-post {
opacity: 1;
}
#site-navigation {
background-color: #dd9933;
}
.widgets-grid-layout .widget-grid-view-image img {max-width: 150px;min-width: 1px;min-height: 1px;
<img style="width:(the real width of the image smaller than 510px)px; margin-left:0"
.entry-content img.alignright, .entry-content img.alignleft {
width: auto;
}
/* center navigation items */
#site-navigation ul {
width: 80%;
}
@media only screen and (min-width: 1100px) {#site-navigation {
width:1100px;
margin: 0 auto;
}}
@media only screen and (min-width : 870px) {
#content, .slider, .entry-content img, .entry-content iframe, .entry-content object, .entry-content embed, .author-bio, #content .widget
{ width: 900px;}
#header {
height: auto;
}
Hi,`
You have at the bottom of your CSS Custom codes have some typos
<img style="width:(the real width of the image smaller than 510px)px; margin-left:0"
That´s why it doesn´t work