I have turned all responsiveness off for AT and everything all is fine with the exception of the header and footer background images. Whenever I view the website in most smaller resolutions than my laptop, the header and footer seem to shrink which leads to a small header image with the text and images over it and exceeding the boundaries. I have noggin for the header, and have it set to auto width, and I added the CSS for the footer the same way.
The website is jgroovestudios.com. I have a feeling I am missing something simple, and have tried messing with the page width under settings, but do not know what to do (If I set to percentages, it starts moving all other elements). I will attach the photos below. I would appreciate any suggestions!
| Comment | File | Size | Author |
|---|---|---|---|
| settings.png | 27.88 KB | xarchmaemo | |
| headerissue.png | 740.9 KB | xarchmaemo |
Comments
Comment #1
Jeff Burnz commentedDo you have a link, I just want to check the CSS first hand and see that the actual issue is. Seems easy to fix once I can see it.
Comment #2
xarchmaemo commentedJgroovestudios.com
Comment #3
xarchmaemo commentedIt seem the header and footer follows the page width, while everything else (the slideshow) doesn't conform to any page dimensions.
Comment #4
xarchmaemo commentedJeff, I am stuck. It looks like any element "header-wrapper" and above has a smaller page width, but everything below it stretches to fill the screen. I don't understand why the width isn't inherited.
Comment #5
xarchmaemo commentedFigured it out. I set #header-wrapper to have min-width. Credit goes to kabarca. Thanks!
Comment #6
mattbloomfield commented