juxtapoze — 2013-02-12T17:58:58-05:00 — #1
Hello, I was wondering if someone could help me figure out how to modify my CSS file in this wordpress theme so that the "Body" section does not move up into the logo and navigation bar when the resolution is less than 1024-768. This design is mobile device responsive and Im not sure if that is what is causing this design flaw. I would really appreciate the help!
Thanks in Advance!
dresden_phoenix — 2013-02-12T18:09:36-05:00 — #2
Welcome to SitePoint, Anthony.
Sorry I couldn't give your code a through look, am on my way out the door. But i think I see the gist of what is happening here. You have an element which is being vertically centered via a CSS technique. When you make the viewport shorter than the element the element starts to slide up.
I recommend you add min-height: the mining height of element + menu+ logo area to your html, body . you may need to target another container as well, but let's start with that.
hope that helps.
juxtapoze — 2013-02-12T18:19:16-05:00 — #3
Thanks for your reply....I thought that was the case and I added " min-height:800px " to the body CSS tag and I didnt get any change. Maybe Im missing something?
paulob — 2013-02-12T19:10:15-05:00 — #4
You would need to adjust the script to solve that problem which is a question for the JS forum.
As an example use css terminal and add the following code to your live site so you can see how it would look with a css version.
margin: 34px auto 0;
margin:0 auto 0 !important;
position: relative !important;
Of course that assumes a fixed height for the layout but it looks like that's what you have anyway.
juxtapoze — 2013-02-12T19:38:35-05:00 — #5