Archived topic
Page photos on mobile only
3 replies · Started by Joey on July 10, 2020
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.
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
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.
Glad to be of help.
Thanks for sharing your final code.
