loonattic

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.