WordPress Child theme – weird horizontal scroll

[jknetdesign]

http://crhouseinc.com/about-us/team/

I created this child theme. I don’t know what the problem here is. Maybe it has to do with something positioned absolutely? When a page has a lot of content it get’s a weird position in the browser. When you make the browser smaller the wrapper sticks to the left and you can scroll horizontal.

[Mottie]

The only weird page I see on your site is the home page slider. It’s under the header and the image caption is off the screen. And that is because of the absolute positioning. I added the specific body class for that page to this css which should get it centered again

body.page-id-14 #container {

background-color: #FFFFFF;

margin: 0;

width: 1000px;

}



body.page-id-14 .one-column #content {

margin: 0 auto;

width: 1000px;

}



body.page-id-14 .entry-content, .entry-summary {

clear: both;

padding: 108px 0 0;

}



#rotator {

height: 600px;

width: 1000px;

}

[jknetdesign]

I feel like I’m missing a rule of thumb or best practice when I need to increase the width of twentyten or twentyeleven. If you have a mac mouse with horizontal finger scroller on, you can swipe the whole page horizontal. This is happening to some of my child themes. This one doesn’t have the weird horizontal scroll. http://dev.senensky.com/ It used to do it and I posted a question and got this for a reply:

Your div #content has two margins applied to it, I’d remove the one from line 73. Also your div #colophon in the footer has a fixed width exceeding the containers width, I’d remove that on line 176 so it’s this…

#access .menu-header, div.menu, #branding, #main, #wrapper {
margin: 0 auto;
width: 1156px;
}

I was able to fix this one, but I think I did something wrong with how I absolute positioned something in the CR House website. This is important to me to use best practice on all my child themes.

I guess the main question here is: What’s the best way to widen the theme when I create a child theme?

If you see the example of the original twentyten theme here: http://2010dev.wordpress.com/ When you squeeze up the browser the page doesn’t have the weird scroll by itself and a horizontal scroller appears.

[Mottie]

Hmm, I don’t get a horizontal scroll bar at all. I don’t have a mac nor a horizontal scrolling wheel.

So I’m going to guess that you are looking at the page on a browser width of 1024px or less? In that case, I would say you should make your pages only 960px wide, since that is the standard width to use for 1024×768 resolutions – read a bit more about it at the 960 grid system site.

Better yet, set up your css using media queries. This will take a bit more work, but I really think it’s worth it in the end. Try narrowing your browser window while looking at this site, you’ll see things shift, change styles and rearrange.

[jknetdesign]

The 960px is kind of the unwritten standard from a few years ago, but your info really opened my eyes. Thank you for taking the time to help me. The media query thing is powerful.

[Author]

Posts