[Resolved] How to Not Display In-column image on mobile

[Sean]

Hey @tom

I have a service website that uses sections to illustrate benefits. I have 3 image/text column combo section set up at 33%/66% split, like so:

section 1: img | t e x t

section 2: t e x t | img

section 3: img | t e x t

The problem:

When on mobile, section 2/3 stacks with double images due to reverse order, like so:

img
text
—
text
img
—
img
txt

And it looks bad. Is it possible to force images in these three section to not display on mobile?

I tried coding it like this:

<div class="grid-66 tablet-grid-66 mobile-grid-100 first-column">
<h2>headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</div>

<div class="grid-33 tablet-grid-33 mobile-grid-0 second-column">

<img src="https://domain.com/wp-content/uploads/2018/10/exaple-300x300.png" alt="" width="300" height="300" class="alignnone size-medium wp-image-229" />
</div>

setting mobile grid to “0” but that is probably some BS code WP doesn’t even recognize 🙂

So is there a way to make the images in these sections/columnns NOT display on Mobile?

Thanks!

[Leo]

Hi there,

This should help: https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

Let me know 🙂

[Sean]

crushed it. Thanks @Leo

[Leo]

No problem 🙂

[Author]

Posts