[Support request] Change UnSemantic grid breakpoints

Home Forums Support [Support request] Change UnSemantic grid breakpoints

Home Forums Support Change UnSemantic grid breakpoints

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #705545
    K

    What’s the best way to change unsemantic grid breakpoints to my own preferred breakpoints?

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #705564
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You’d need to copy the file and add it to your child theme.

    Then do this:

    add_action( 'wp_enqueue_scripts', function() {
        wp_dequeue_style( 'generate-style-grid' );
    
        wp_enqueue_style( 'generate-style-grid', get_stylesheet_directory_uri() . "/unsemantic-grid.css", false, GENERATE_VERSION, 'all' );
    }, 20 );

    This assumes your copy is called unsemantic-grid.css and lives in the root of your child theme.

    Let me know if you need more info 🙂

    #707559
    K

    Hi Tom,

    Unfortunately it isn’t taking. I have different breakpoints set in my new breakpoint stylesheet (unsemantic-grid-responsive-tablet.css), which I’ve placed in my child theme folder, and this code in my child theme’s functions.php file:

    // Added to use personalized unsemantic grid
    add_action( 'wp_enqueue_scripts', function() {
        wp_dequeue_style( 'generate-style-grid' );
    
        wp_enqueue_style( 'generate-style-grid', get_stylesheet_directory_uri() . "/unsemantic-grid-responsive-tablet.css", false, GENERATE_VERSION, 'all' );
    }, 20 );

    However, the original breakpoints are still being used. (I installed this browser plugin to double-check: https://addons.mozilla.org/en-US/firefox/addon/display-page-resolution/).

    Any other suggestions?

    Thanks.

    #707585
    K

    Some more information:
    – From the css inspector, I can see that it is still using …/generatepress/themes/css/unsemantic-grid.min.css
    – I have not installed any external caching method (plugin or otherwise).
    – Just in case, I have tried restarting the virtual machine wordpress is running on, as well as clearing my browser caches. Didn’t help.

    Thanks.

    #707600
    K

    One more edit:

    – I switched to using unsemantic-grid.min.css (and updated the filename in functions.php). Unfortunately, it didn’t help and is still using the parent theme.

    #707741
    Tom
    Lead Developer
    Lead Developer

    Ah yes, I see the issue. Let me look into this a little more – it may be something we need to tweak in the theme itself.

    #708234
    K

    OK, thanks. Please keep me posted once you have something.

    In the meantime, I’m going to try and edit a copy of the parent stylesheet for development purposes.

    Thanks.

    P.S. If you’re going to be updating the theme, it would be great if the wordpress customizer device preview breakpoints matched whatever you use in the theme (I’ve been looking at this: https://wordpress.stackexchange.com/questions/223684/adjust-the-device-preview-sizes-used-in-the-wp-4-5-customizer)

    #708452
    Tom
    Lead Developer
    Lead Developer

    Try using this function instead:

    add_filter( 'style_loader_tag', function( $html, $handle, $href, $media ) {
        if ( 'generate-style-grid' === $handle ) {
            $href = get_stylesheet_directory_uri() . "/unsemantic-grid-responsive-tablet.css";
            $html = '<link rel="stylesheet" id="generate-style-grid-css"  href="' . $href . '" type="text/css" media="all" />';
        }
    
        return $html;
    }, 10, 4 );
    #708525
    K

    Thank you, that accepted the replacement stylesheet.

    However, it seems there are other files that contain @media breakpoints as well.
    At 767px vs 768px width, the font size changes even though I have different breakpoints now. Firefox/Chrome indicate that it’s inline/index css. Any ideas?

    Thanks.

    #708556
    K

    I found out what’s causing the breakpoints: In customizer->typography->headings you can select font size for mobile separately. However, it seems this setting uses 767/768px breakpoints to determine mobile.

    Where do I change these breakpoints?

    Thanks.

    #708578
    Tom
    Lead Developer
    Lead Developer

    Try this:

    add_filter( 'generate_mobile_media_query', function() {
        return '(max-width: 768px)';
    } );
    #708580
    K

    That didn’t seem to work.

    If you look at my home page blog grid, you notice that at 767px the grid breaks a bit. (My new breakpoints in the unsemantic grid are set to 539 mobile/540 tablet).

    I see that there are media breakpoints set to 768px in parent theme’s /style.css and /css/mobile.min.css. I guess I need to change these too, but can’t figure out the best way to do so?

    To back up a bit, my goal is to reset all breakpoints as follows:
    FROM: Mobile up to 767px TO: Mobile up to 539px
    FROM: Tablet 768px-1024px TO: Tablet 540px-999px
    FROM: Desktop 1025px and up TO: Desktop 1000px and up

    #708671
    Tom
    Lead Developer
    Lead Developer

    There are definitely some 768px breakpoints throughout the theme that can’t be edited without replacing the entire file. That obviously is less than ideal.

    Are there specific problems you’re trying to solve here? It might be better to just overwrite certain classes with your own media queries.

    #708701
    K

    OK, that makes sense. Just so I understand it, does my customizer css/child theme style.css take precedence over the parent styles?

    #709441
    Tom
    Lead Developer
    Lead Developer
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.