Header Right Widget Won't Drop Below on Phone

[paulag01]

I have been tinkering with the media css for a site (http://www.drlisavanallen.com) and while it is displaying fine on tablets, on the mobile phone, the header right widget (with the social media icons) is still appearing jumbled across the logo (leftmost side of header image).

Based on reviewing a few threads in the forums I added:

@media only screen and (max-width: 500px) {

.site-header .widget-area {
width: 90%;
}

}

for max-width 1023 I have:

.site-header .widget-area {
width: 100%;
}

.sidebar div.widget-wrap{
margin-right: 0; /* added */
}

and max-width 1139

.content,
.site-header .widget-area {
width: 620px;
}

Can someone help me sort this out not only to fix it here but to understand it better going forward?

Thank you!

http://www.drlisavanallen.com

[emasai]

Try changing the following in your 500px media query
.site-header .widget-area {
width: 100%;
margin: 130px auto 0;
}

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[paulag01]

That definitely gets it to drop down on the smartphones...but it truncates the left 50% of the header right widget content.

Thoughts on which setting that might be to get it to display the content fully?

Do I need a float in there or something?

Thanks again for your help!

[emasai]

Line 914 width: 600px is messing it up, change it to max-width: 600px.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[paulag01]

That did it!

Thank you!

[Author]

Posts