[Resolved] Easiest way to adjust the breakpoints?

[vr51]

The ad network Mediavine has told me they want my sidebar widgets to be no narrower than 300px wide. Between 769px and 1024px the primary sidebar shrinks in width until it eventually drops below the main content column at viewport width 768px, as expected. To satisfy Mediavine I have edited the core CSS files mobile.css and mobile.min.css to change the breakpoints:

@media (max-width:768px) {
  /* All directives */
}

to

/* Container is 1120px wide */
@media (max-width:1120px) {
  /* All directives */
}

I know I can create a child theme and safely edit the CSS files but I’m looking for a simpler way to adjust the breakpoints.

What is the minimum of CSS I can add to Customizer to change the breakpoints while still maintaining layout integrity?

[Leo]

Hi there,

Mobile navigation can be adjusted with this CSS: https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

If you are using mobile header: https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

It is not good to modify the theme’s core files as it won’t be saved through updates.

Should try one of these methods here: https://docs.generatepress.com/article/adding-css/

[vr51]

Thank you, Leo, but you missed my question. I need to adjust the sidebar breakpoint. There is a lot of CSS used to control the responsive behaviour of the main column and the primary sidebar. Editing the core CSS files is a quick fix while I assess the CSS to find the minimum amount required to adjust the responsive behaviour of the main content column and the primary sidebar column.

I’m asking whether anyone knows the minimum amount of CSS required to override the responsive behaviour of the primary sidebar and main content column such that no unintended awkward consequences occur when the breakpoints are changed; this way I can use a small snippet in Appearance > Customize > Additional CSS instead of loading edited versions of the responsible CSS files from a child theme that will likely need to be updated each time GeneratePress updates (there is a lot of CSS in those files).

If anyone has a pre-written snippet for the above purpose then I would appreciate the time it will save me.

[Tom]

You should be able to revert the mobile.min.css file back to normal.

Then add this custom CSS:

@media (max-width: 1125px) {
    .content-area.grid-70 {
        width: 65%;
    }
    .sidebar.grid-30 {
        width: 35%;
    }
}

@media (max-width: 925px) {
    .content-area.grid-70 {
        width: 60%;
    }
    .sidebar.grid-30 {
        width: 40%;
    }
}

@media (max-width: 768px) {
    .content-area.grid-70 {
        width: 100%;
    }
    .sidebar.grid-30 {
        width: 100%;
    }
}

That should keep the sidebar over 300px wide all the way down until you hit mobile.

Let me know 🙂

[vr51]

Thank you, Tom. Will test this overnight and let you know.

[Tom]

Sounds good 🙂

[vr51]

So far, looks good. Thanks Tom.

Unfortunately Mediavine have now moved the goalposts. Again. I’m hunting them down so I can have a proper chat with them. Offered to fly out to them and help them fix their problems (I am that annoyed with them). At this point I’m just inclined to tell people to avoid Mediavine. Not the most professional approach but maybe that will grab their attention.

[Tom]

Sounds like a hassle! Let us know if there’s anything else we can do to help 🙂

[Author]

Posts