Equal sidebar widths again, except at 300px

Hi Alex and any helpful members.

The more I play with your theme, the more possibilities I see but there’s the one issue still dogging me.

The sidebars don’t want to behave.

I basically want a 300px sidebar (including the 20px padding) on the left and another on the right at exactly 300px (including the 20px padding).

Here’s what I’ve got up till this point.

Reducing the browser window throws the right hand sidebar out of whack and the icon doesn’t toggle on.

I’ve put together some really primitive CSS based on the Firebug extension so try not to laugh too hard.

This is the Dev site so nothing is set permanently.

https://sbrs-04.shoeboxradio.ca/

As you’ll see on the dev site the background png images have been replaced but these could be any color eventually.

/* Sidebars */

.col-3cm .s1 {
    float: left;
    margin-left: -340px;
    background: repeat scroll 0 0 #ffff00;
    max-width: 340px;
}
.s1 {
    width: 340px;
    z-index: 2;
}

.col-3cm .s2 {
    background: repeat scroll 0 0 #ffff00;
   /* float: right; */
    margin-right: 520px;
    max-width: 340px;
    position: relative;
    right: -100%;
    margin-top: -2176px;
}

.s2 {
    width: 340px;
    z-index: 1;
}

@media only screen and (min-width: 961px) {
.col-3cm .s1 {
    float: left;
    margin-left: -340px;
    background: repeat scroll 0 0 #ffff00;
    max-width: 340px;
}
.s1 {
    width: 340px;
    z-index: 2;
}
}
@media only screen and (min-width: 479px) and (max-width: 960px) {
.col-3cm .s2 {
    background: repeat scroll 0 0 #ffff00;
   /* float: right; */
    margin-right: 520px;
    max-width: 340px;
    position: relative;
    right: -100%;
    margin-top: -2176px;
}

.s2 {
    width: 340px;
    z-index: 1;
}
}

Then this was added because the content overflowed into the right sidebar.

/* Content */

.entry p, .entry dd {
    margin-bottom: 1em;
    max-width: 90%;
}

All modified CSS has been placed in the child folder.

The Website Max-width is set to 1380px and sidebar width set to 300px primary, 220px secondary (20px padding)

I’m not concerned over the content width so it can be whatever it needs to be to get this working.

Most users seem to want a thinner sidebar and I’ve used the CSS that’s available from other posts.

The big question… Is it even possible to make both sidebars 300px?

Or am I wasting mine and other’s time?

Thanks.

Hi loonattic. Sure, it’s possible, but how much time do you want to spend on it? Your question, as you’ve seen, has been asked in one form or another many times. And, to my knowledge, nobody has come up with a “silver bullet” formula to make the changes easy. I think you’d need to make a significant number of css changes to make it function correctly. It appears that you’ve already taken a run at that. But finding them all, and making sure they work, is not a small task. I suggested to one poster that they might be better off looking for a theme that had adjustable sidebars, although I don’t know if there are any in the “free” category. I don’t think you’re wasting anyone’s time here. We all try to help when we can. It’s just that this is probably a larger and more difficult change than most users want to take on. My 2 cents worth.

Thanks for the quick response.

Considering the challenge of developing a theme that displays properly on all devices in the first place is no small accomplishment.

Additionally that Hueman is a free theme makes it even more amazing.

===

The default settings using sidebar 1 at 300px and sidebar 2 at 220px should accommodate most anything I want to display.

If equal sidebars are desired then the CSS for equal sidebars at 260px has been posted here a number of times and can be used at anytime.

My capacity to modify a responsive site is limited so I should concentrate on variables that can be modified without frustration and that possibly results in a broken theme.

It’s a comfort to know that Alex has a solid support network in place for the numerous requests.

I’ve found answers to my questions on previous posts which has made other modifications possible and easy.

Thanks again bdbrown and to all others who make this forum an excellent resource.

You’re most welcome. Glad to help when I can.