Full Width Content Problem

[raziel0315]

I have the Genesis Sample Child theme. As it stands, when I put a secondary sidebar, both the secondary bar and the content end up getting squished. I can see in the CSS how/where that happens. I also noticed that a lot of space on the sides is being wasted. There is more than enough room for the second bar to be a little bigger without squashing the content or the primary bar.
I figured out how to extend the width of the page, but then the content bar ends up pushing the primary off the side and onto the page under the content bar.

I've searched the boards already for this, but I couldn't find anything to help me.

Anyone know how to fix this or why it's happening?

Thanks

http://www.theoddspoon.com

[frobn]

You can manipulate the padding and margin to close the space. You may also need to make changes in media queries.

example:

.content .entry
{
  padding: 20px;
  margin-right:-10px
}

[raziel0315]

Media queries?

I'm only know a little about CSS.

Won't taking margin away from the right make the boxes move to the right?

[frobn]

You are doing pretty good for a beginner. Try what I suggested. The way to learn css is to experiment with it. Use W3Schools to learn more .

CSS Margin - W3Schools They have a sand-box for each selector so you can see what happens when you can test various examples.

The media queries are used to adjust code at different breakpoints for mobile devices. Padding may differ from the desktop settings. Thinking about it I don't think it will make any difference with what you are doing.

[raziel0315]

Thanks, but ti didn't work.

Here's the code I've used so far:

/* Content Sidebar Wrap*/
.sidebar-content-sidebar .content-sidebar-wrap {
width: 1200px;
float: right;
}

/* Content */
.sidebar-content-sidebar .content {
width: 800px;
}

/* Primary Sidebar */
.sidebar-content-sidebar .sidebar-primary {
float: right;
width: 360px;
}

/* Secondary Sidebar */
.sidebar-content-sidebar .sidebar-secondary {
float: left;
width: 300px;
}

The content bar and the primary look good, but the secondary keeps getting shoved under the content. There is more than enough room on the page to get all three side by side without having to shrink any of them. It seems like the primary WON'T move to the right, and, therefore, keeps forcing the secondary off the page to the bottom. I made the Content Sidebar Wrap 1300px and all it did was move the content and primary further left instead of right.

[raziel0315]

Nevermind. I got it. Thanks, though.

Is it better to have percentage instead of px so that the code adapts to different size monitors?

Here's the code I ended up with:

.site-inner,
.wrap {
margin: 0 auto;
max-width: 1550px;
}

/* Content Sidebar Wrap*/
.sidebar-content-sidebar .content-sidebar-wrap {
width: 1200px;
float: right;
}

/* Content */
.sidebar-content-sidebar .content {
width: 800px;
}

/* Primary Sidebar */
.sidebar-content-sidebar .sidebar-primary {
float: right;
width: 360px;
}

/* Secondary Sidebar */
.sidebar-content-sidebar .sidebar-secondary {
float: left;
width: 300px;
}

[frobn]

You lost responsiveness. You can test it as http://www.studiopress.com/responsive/. In my original post I was trying to avoid changing the widths. View the css on other child themes that are closer to the look and feel you are trying to achieve, I think eleven40 comes closest to what you want. But since the child themes are built on the same code base I think they are likely to have more distance than you like between content and sidebars.

BTW you are right it is better to use percentage or em for the widths. In some of the newer themes font-sizes are given in both px and rem. I am working on a couple of custom themes with padding, margins and media queries in em's.

[raziel0315]

I see now what you meant in your first post, but my goal from the beginning was to change the widths. As I said, they were wasting space on the sides. I tried putting percentages in place of pixels, but it didn't look the same. What resolution do you have?

[raziel0315]

I found the percentages to make the site look the same on MY computer, but, unfortunately, the responsiveness is still crap on smaller resolutions. What happening now, on the smaller rezes, is the columns are all being squished into one space. Do you know what the code is to make the columns line up vertically when there isn't enough space?

[Author]

Posts