Responsive site, header and footer width issues on mobile / tablet

Question

I have been working on a modified wordpress site (heavily modified theme), and have run into a css / responsive related issue.

When the body has an unusually large-width item, or a dynamic item (dynamic in terms of width, like a jQuery DataTable) whose width goes beyond the body, the sites header and footer do not properly expand to occupy the full width of the body.

for a live example visit this link (however you will need to use a user-agent modifier or use chrome emulator, either of which set to iPad or iPhone, for example).

image example:

http://vicariauction.com/cars-coffee/

(notice how the header and footer dont expand to the width of the "map" image in the body)

-- here is a link to a screen shot of the above page, showing the exact issue:

i.imgur.com/BUjzLAK.jpg

jQuery dataTables example:

http://vicariauction.com/future-auctions/?ahcode=NOLA%202015

(notice how the header and footer dont expand to the width of the jquery datatable below)

-- here is a link to a screen shot of the above page, showing the exact issue:

i.imgur.com/4nx2M5v.jpg

Both examples, header and footer's widths scale properly if using anything but a mobile or tablet device (or user-agent).

I realize the answer may not be a simple explanation, but can anyone maybe at least point me in the general direction that i should be looking towards for a solution?

thanks!

Answer 1

Instead of making the header wider, why not make the image narrower? Mobile users shouldn't have to scroll horizontally anyway.

To make the image fit the width of the screen, use the following CSS style on the image:

max-width: 100%;
height: auto;

I realize this only answers part of your question, but it's definitely what I would do with the image.

---

On an unrelated note, I noticed that in future-auctions/styleau.css , line 18, you have the following line:

*{box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}

Prefixed CSS rules should always come first, so the correct way to write that line is:

*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}