CSS positioning question

HTML & CSS
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!

-Anthony

http://juxtapozemedia.com/demosite3

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.

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?

4

Hi,

Min-height won’t help here because the element is absolutely placed and its top margin is controlled by some javascript to drag it central which results in the element disappearing through the top on small height viewports. (It’s not a nice effect and makes me feel a bit queasy the way it wobbles around.)

You would need to adjust the script to solve that problem which is a question for the JS forum.

If your site is always a fixed height then you don’t need javascript to vertically center it anyway as CSS can do that.

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.

IE8+ only:


body:before{
content:" ";
display:block;
float:left;
width:100%;
height:50%;
margin-top:-256px;
}
#content-elements{
display: block;
overflow: hidden;
margin: 34px auto 0;
position: relative;
height:512px;
width:100%;
clear:both;
}
.contBg{
clear:both;
left: 0;
top: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.

5

Paul, thank you for taking the time and replying. I figured it was something more than the CSS as the culprit. I added a post in the Javascript thread! Thanks again!