Change UnSemantic grid breakpoints

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 :)

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.

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.

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.

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.

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)

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 );

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.

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.

Try this:

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

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

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.

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

Yes :)