[Resolved] Page photos on mobile only

Home Forums Support Page photos on mobile only

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1358771
    Joey

    I have one last tweak that I’m having trouble with. On my landing page (https://simipress.com/), I have a page hero with a full page image. There are three images below that page hero in the body of the page. Is there a way to make those images in the body disappear on desktop? On mobile there is no page header so I need those images, but if there was a way to remove them on desktop it would look more professional. The idea is that mobile has a different set of images for navigation. Thanks.

    #1358811
    David
    Staff
    Customer Support

    Hi there,

    if you want to remove the entire content so only the header element is displayed then add this CSS:

    .home.page .entry-content {
        display: none;
    }

    If there is going to be other content and you want to selectively hide those blocks, then you can edit each Image Block, and in the Settings Sidebar > Advanced you can add an Additional CSS Class of: hide-on-desktop hide-on-tablet

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

    #1359656
    Joey

    Thank you, I was trying to edit the div class of each photo, this is much simpler. In case it is useful to anyone else, my final code for only showing photos on mobile was this:

    @media (min-width: 500px) { 
    	.home.page .entry-content {
       	 	display: none;  }
    }

    I didn’t know about the hide-on codes, that is super useful. Thank you for all your help again.

    #1359861
    David
    Staff
    Customer Support

    Glad to be of help.
    Thanks for sharing your final code.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.