- This topic is empty.
December 2, 2014 at 6:24 pm #189811
Hello everyone, I need some help. I’m new to the forums (and web design), so take it easy on me. :)
Anyways, I am designing a new website for work and im running into some issues with the header and footer not expanding to 100% of the page width when the window is smaller. I found this article explaining the exact problem I am having with a solution, but the solution is not working for me.
Anyways, here is the site in question: http://www.sao10.com/new/index.asp
Any help or suggestions would be greatly appreciated.December 2, 2014 at 7:20 pm #189813ShikkedielParticipant
Adding ‘position: absolute’ to body (in the css) seems to solve the issue. As far as I can see, the page is 100% width (minimum 1280 pixels) but positioning is off.December 3, 2014 at 3:37 am #189824Paulie_DMember
when the window is smaller.
Smaller than what?
Your site is not set up to go smaller than 1400px probably due to min-widths and padding.
You get scrollbars below 1400px.
The HTML looks a little screwy too.
Your linking Jquery in script tags etc inside the body rather than the head.December 3, 2014 at 11:53 am #189868
What I mean by a smaller window is if you make the window size smaller the header and footer do not expand the full width of the page. The first link that I posted could probably explain things better than I can.
I set the min-width to 1400px as a quick fix for the issue, but it broke the centering of my navigation because it was centering to 1400px instead of the widow’s width. I have the Jquery scripts in there for the Back to Top button. It doesn’t seem to work unless its in the body unfortunately.
The site seems to be fine at higher resolutions, but not the lower ones.
Setting the position to be absolute does not seem to fix it.December 3, 2014 at 1:02 pm #189871ShikkedielParticipant
Worked for my own screen size (1280)…
But I think setting body to 100% could be the actual solution.
Edit – width, that is of course.December 4, 2014 at 7:31 am #189912
I set the min-width of the body to be 1340px instead of 1280px, then took off some padding of the footer and it fixed the scrollbar issue. So it was the padding in the footer that was causing it.
Everything looks fine now.
Thanks guys for your help, and I will work on cleaning the html up. I will mark this question as solved, but I am still open to suggestions.
Edit: How do you mark this thread as solved?December 4, 2014 at 7:42 am #189914Paulie_DMember
Edit: How do you mark this thread as solved?
We used to be able to do that but it’s not available right now.
I tend to do that as part of the Mod service. :)December 4, 2014 at 10:36 am #189950
Okay, well thanks. :)
- The forum ‘CSS’ is closed to new topics and replies.