Site logo

Archived topic

How to Not Display In-column image on mobile

3 replies · Started by Sean on October 6, 2018

Viewing posts 1–4 of 4

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!

crushed it. Thanks @Leo

No problem :)

This archived topic is closed to new replies.