Mobile page not filling the screen

Hi again,

I think I have located the css that is responsible for this, but don’t understand why it isn’t working. There are two margins specified for the content: one in the main section of the CSS and one in the responsive adjustments section:

#content {
margin: 0 280px 0 0;
}

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

#content {
margin:0;
}
#main .widget-area {
float:left;
clear:left;
}
}

Why isn’t the second #content {margin:0;} clearing the first 280px margin? How should I adjust the code?

Thanks again… ??

Since you have define the media screen css so on mobile screen it takes css from there
#content {
margin:0;
}
and cut the css
#content {
margin: 0 280px 0 0;
}
Can you please tell what you exactly want there.

Hi, thanks for your reply.

Yes, I understand that. But, on my mobile screen, the blog KEEPS the sidebar width 280px while also moving the actual sidebar to the bottom, which leaves those 280px displaying the background. Does this make sense?

I just checked the page on my laptop browser (Chrome, Firefox, IE, and it displays correctly.

Seems this might have something to do with iphone or Safari?

I do have <meta name="viewport" content="width=device-width"> in the head of the page.