Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Resolved] Easiest way to adjust the breakpoints?

Home Forums Support [Resolved] Easiest way to adjust the breakpoints?

Home Forums Support Easiest way to adjust the breakpoints?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #485964
    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?

    GeneratePress 2.0.2
    GP Premium 1.5.6
    #486081
    Leo
    Staff
    Customer Support

    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/

    #486258
    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.

    #486631
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #486666
    vr51

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

    #486903
    Tom
    Lead Developer
    Lead Developer
    #487017
    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.

    #487263
    Tom
    Lead Developer
    Lead Developer

    Sounds like a hassle! Let us know if there’s anything else we can do to help πŸ™‚

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.