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

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

Home Forums Support How to Not Display In-column image on mobile

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #695162
    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!

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #695179
    Leo
    Staff
    Customer Support
    #695191
    Sean

    crushed it. Thanks @Leo

    #695527
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.