Tablet Responsiveness Issue for Query Loop

Hi Ron,

Can you link us to your site and make sure cache is all cleared？

Let me know 🙂

It doesn’t seem to have any issue when I check.

What is the device are you using?

Hi Rbt,

I’m assuming your Amazon fire table has a screen width of 767pxor lower which is causing it to show in Mobile since Mobile is usually 767/768px or lower.

On an actual iPad 9th gen, it’s showing up 50% Grid width upon testing.

If you want to alter the Tablet Breakpoints, try adding this snippet:

add_action( 'wp', function() {
    add_filter( 'generateblocks_media_query', function( $query ) {
        $query['tablet_only'] = '(max-width: 1024px) and (min-width: 765px)';
        $query['mobile'] = '(max-width: 764px)';

        return $query;
    } );
}, 20 );

Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

Make sure to Regenerate your CSS files in Settings > GenerateBlocks.

That code should work. It must be caching or your Amazon fire tablet has a lower media breakpoint.

Try decreasing 765px and 764px in the code to lower corresponding values to test. If this doesn’t work, try to choose Inline Embedding for the CSS Print Method in Settings > GenerateBlocks.

If it doesn’t work, your tablet is likely cached.

I see. Yes, that should be accurate.

I personally use BrowserStack to check for site responsiveness. Reference: https://www.browserstack.com/

They have different “Real” devices there for tests.

You’re welcome, Rbt!

I use neither of those.

I use Manual Testing – Live.

There’s only a free trial, unfortunately.

I found some other testing tools through Google. Ex: http://responsivetesttool.com/ – not sure if this would be accurate though.

I’ve only been exclusively using BrowserStack since the test is on an actual device, not a simulation.

You’re welcome, Rbt!