[Resolved] Grid Skewed

[Caitriona]

Hello, I’ve been trying to set up a block with text and image on the homepage. I’ve been able to successfully implement it with the media+text block, but on mobile, that doesn’t really fit. So I used the grid to create what I wanted. On the preview version, it looks completely fine, but when I update the page and try in the incognito mode it’s just completely skewed. The rest of the site has no problems. Any idea why this happens?

[Ying]

Hi there,

I don’t see a Grid block on your homepage, the section you highlighted in your screenshot is using WP core block.

And it looks good to me:
https://www.screencast.com/t/LnhU8xz39rXP

[Caitriona]

Hello, I don’t think I have a screenshot but I tried with the grid and it didn’t show up correctly. The media + text box that I am using now looks bad on mobile

[Caitriona]

Will I try the grid again so you can see that? Or maybe it is possible to continue using what I currently have, just make it more compatible with mobile?

[David]

Hi there,

try adding this CSS to your site:

@media(max-width: 768px) {
    }
    .wp-block-media-text.is-stacked-on-mobile {
        display: block;
    }
    .wp-block-media-text__media {
        max-width: 250px;
        margin: auto !important;
    }
    .wp-block-group__inner-container {
        padding: 0 !important
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Caitriona]

Hi, that didn’t help exactly. I went back to the grid, so you can see how it is behaving. Please check the screenshots of the preview versus the updated version.

[Ying]

The Grid block doesn’t work, it is because there’s no dynamic CSS generated.

Something is blocking it. Can you try to disable all plugins except GB and GP premium to test?

And could you go to GenerateBlocks > settings, click the Regenerate dynamic CSS button?

Let me know!

[Caitriona]

Hey, got it, thanks. It was the minify CSS files on my WP Rocket plugin. If I want to continue using it on my site for faster speed, maybe I can exclude specific CSS files. Is there any way to know the CSS file name so I can exclude it from minification?

[Ying]

The CSS is generated dynamically, you can try setting the CSS print method to inline embedding at GenerateBlocks > Settings.

Let me know if this works.

[Caitriona]

It seems to work. Thank you!

[Ying]

Great! You are welcome 🙂

[Author]

Posts