Archived topic
Fixing sidebar widths over 769px
5 replies · Started by Arp on July 20, 2020
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?
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);
}
}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.
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.
I'm going to see if the customer notices or just accepts it as is ;)
Sounds good - let me know :)
