[Support request] Fixing sidebar widths over 769px

[Arp]

I followed some of the other forum posts in attempting to do this, but none of them address ‘pull’ classes.

What I’m trying to do is a 3 column format where

1) the left column is fixed at 205px wide
2) the far right column is fixed at 355px wide
3) the content width is calc(100%-560px)

It looks like I’ll have to customize the left values for each device width I’m targeting (due to the .pull-xx classes)? Or is there an easier way?

[Tom]

Hi there,

You shouldn’t need to worry about the pull or push classes.

Something like this should work:

@media (min-width: 769px) {
    #right-sidebar {
        width: 355px;
    }

    #left-sidebar {
        width: 205px;
    }

    .content-area {
        width: calc(100% - 560px);
    }
}

[Arp]

I tried that already, and both the left column & primary content areas were not in the right place. I had to futz with the push amount to get them to be where they were supposed to.

[Tom]

Hmm, I suppose that makes sense since the push/pull widths need to match the sidebar widths.

If you aren’t able to match them, feel free to link me to the page with the above CSS added and I should be able to tweak it.

[Arp]

I’m going to see if the customer notices or just accepts it as is 😉

[Tom]

Sounds good – let me know 🙂

[Author]

Posts