Hi All, I am in the process of making a website for a friend, when I ran into what looks like a css problem. I purchased the css file in a template from a guy who does tutorials on youtube, I have contacted him on several occasions but his customer service is pretty awful and he hasn't replied to any contact. When using a mobile or tablet to view the website the header and footer area is pushed to the left. (please see attached image) I added 100% to the following containers but still it never changed them. #header-wrapper #footer-content-wrapper #footer If I change the widths to 1000px then it sorts it out for the mobile view but then the website on a pc/laptop is distorted. the website can be found at www.leightonsterling.com Thankyou in advance.
It's not a glitch, it's how CSS works. If you didn't set a min-width yourself, your browser won't go and guess what the min-width should be. That being said, whenever you repeat a background image within a HTML element, it will stop repeating at the maximum width, without scrolling, of that particular device. Since your website's width is fixed (BAD) to 1000px, you have to put this in your css: #footer-content-wrapper { min-width:1000px; } #footer { min-width:1000px; }