Ipad and smaller browser view issue

HTML & CSS
1

If you look at my site: www.classicstoday.com

on an older or smaller monitor or on an Ipad you will see on the right hand side that there is a weird white box that appears on the right hand side that overlaps some of the header. I am looking for some ideas and thoughts as to why this is happening and how I can fix it.

Thanks.

2

What’s happening is that the header is set to a width of 1200px, but on smaller devices some of the right hand side is covered. So the #HeaderWrapper (that has the green background) starts off at a width less that 1200px. If you scroll to the right, that green background is absent. The way to fix this is to give a minimum width the the wrapper:

#HeaderWrapper {min-width: 1200px;}

See if that does the trick. :slight_smile:

EDIT: I don’t have an iPad, but is see that it’s not a scroll issue on the iPad. But I still think the above solution should help.

3

That was excellent. Did the trick on the header, then I just did the same thing to the #FooterWrapper and we are all good! Thanks so much for your help!

4

Glad I could help. Thanks for the feedback. :slight_smile: