OK, how about this. I am trying to get the pages of a site to display without scrolling and to re size automatically regardless of the user’s screen resolution. I read this article here about doing the same for background images, and wondered if it might be possible to do the same with pages?
http://css-tricks.com/perfect-full-page-background-image/
Any ideas would be greatly appreciated. Thank you.
Can you clarify what you’re trying to do? When you say “re size automatically”, do you mean the browser window should resize itself (which will annoy your users), or should the text become smaller, or something else entirely? From what you’re describing, I don’t think it’s possible to achieve without some JavaScript.
The site owner doesn’t want anyone to have to scroll. All the pages (except for the blog page and legal page) are designed to be above the fold, viewable without any scrolling. It looks fine on most screen resolutions, but others with different resolutions have to scroll.
Can you remind me of what your site was?
I’m still not 100% sure if this is completely possible. What would happen if someone visited your site on a mobile phone held in landscape mode?
This is the old site (in Joomla) that does what they want. http://www.lallabee.com/beta/
Thanks for posting that Joomla link. I think I’ve got a good handle on what you’re trying to do now.
What’s happening on your Joomla site is that the menu is fixed to the bottom edge of the screen using bottom: 0; and position: fixed;. You can see this for yourself if you look at the Joomla site and make the browser window unrealistically short; note how the menu items overlap the text in that case.
It looks like you’ve already got a custom CSS plugin installed, so give this code a try:
body {
overflow: hidden;
}
#colophon {
bottom: 0;
font-size: 14px;
height: 35px;
position: fixed;
padding: 0 30px;
margin-bottom: 0;
width: 100%;
}
Major breakthrough! Thank you! It works, but I need to change three things:
1. The menu on the bottom is on the left. Can I center it?
2. For the Legal page and the Blog page (the only two pages longer, the words run into the menu at the bottom and are cut off below that. What do you think I should do there? Can we allow scroll here?
3. Now on mobile, the menu floats, but the bottom half is cut off.
I put in the scroll command, and that should work on those two pages, except the text blends with the menu at the bottom.
Also Subscribe is cut off on the right side of the menu.
OK, fixed the menu width issue. Still need:
1. Center Menu horizontally on page
2. Add some space above the bottom menu so the two scrolling pages wont have text running into the menu text
3. The menu on mobile has the bottom lines cut off.
Many, many thanks.
OK, after experimenting a good bit, I think I have the centering and the mobile menu issues fixed. My last problem is that the bottom menu is clear, although the drop downs are not. I need to make the entire menu to be like the drop downs, and not be clear.
Everything is good, but the footer is clear and the text is going right through it on the legal page, making the menu unreadable. The drop downs have a white background for some reason. The text should scroll in its entirety above the fixed footer. This is where I’m stuck. Sorry for the multiple posts. Any help with this one final issue would be greatly appreciated.
Thank you.
You could set the background of the menu area to white. You would have to the set the bottom margin to 0 because the margin won’t be colored white, so I increased the height a bit to compensate.
#colophon {
background: white;
bottom: 0;
font-size: 13px;
height: 70px;
position: fixed;
padding: 0 30px;
margin-bottom: 0;
width: 100%;
}
Thank you. That works, but it hides what is behind it instead of having it scroll above it. It is most evident on mobile, on the Contact Us page where the Submit button is hidden. It is also visible on the legal page where words are hidden on the desktop site as well as the mobile site.
What if you tried shrinking the height of the colophon from 70px to something like 30px?
