[Resolved] Keep sidebars the same width when responsive [option]

[Pete]

So we would basically add CSS to force mobile mode on the sidebars before the rest of the site goes into mobile mode.…
How much “before the rest of the site goes into mobile mode” are we talking about? The problem with that for me is having the sidebar below the content before it’s really needed. 300px of sidebar stuff can look a bit silly under a 900+px of content. I agree that Responsive goes into mobile mode too soon.

I personally like the idea of a (really well commented) @media css section that accounts for all the layout percentages and therefore we can tweak ourselves.

[Luiz Gustavo Mattei]

I’m having the same problem..
I need a fixed sidebar with 300px and the content area responsively :/

There is no way to use the min-width to sidebar?

[Tom]

I’m afraid you can’t mix percentage and fixed when it comes to columns.

There’s a few different options in this thread that should work for you though 🙂

[Tom]

@Pete,

In that case, doing something like this is your best bet:

/* kick in once the browser hits 1200px wide */
@media screen and (max-width: 1200px) {
      .widget-area.grid-25 {
            width: 30%; /* change it from 25% to 30% (or whatever) */
      }
      .content-area.grid-75 {
            width: 70%; /* change it from 75% to 70% */
      }
}

/* kick in once the browser hits 1000px wide */
@media screen and (max-width: 1000px) {
      .widget-area.grid-25 {
            width: 35%; 
      }
      .content-area.grid-75 {
            width: 65%;
      }
}

/* kick in once the browser hits 800px wide */
@media screen and (max-width: 800px) {
      .widget-area.grid-25 {
            width: 40%; 
      }
      .content-area.grid-75 {
            width: 60%;
      }
}

Doing so will give you complete control of the widgets of each area as your scroll down – you just need to adjust the percentages (25, 75) to fit whatever you have set in the Customizer.

[Pete]

resolved

[Author]

Posts