Reply To: Keep sidebars the same width when responsive [option]

Home Forums Support Keep sidebars the same width when responsive [option] Reply To: Keep sidebars the same width when responsive [option]

Home Forums Support Keep sidebars the same width when responsive [option] Reply To: Keep sidebars the same width when responsive [option]

#75056
Tom
Lead Developer
Lead Developer

@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.