Archived topic
Change image when viewed on a mobile
6 replies · Started by Peter on July 13, 2022
Hi
I've created a hook to display an image before the footer as a space for an advert.
It's very narrow and I would like to change the image when the page is viewed on a mobile and tablet.
I've had a good look through previous posts and can't seem to find a solution.
Any help would be gratefully received.
Cheers
Pete
Hi there,
can i see the site with the hooked in image?
Hi David
Thanks for getting back so quickly
https://internationalartsmanager.co.uk
There are 2 images/adverts top and bottom
Cheers
Peter
OK, so you would need to add 2 x Images in your Hooks. One for Mobile and one for Desktop.
Then select the relevant Image Block and in Advanced > Additional CSS CLass(es) you can add the relevant GP hide-on-* image classes
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes
e.g for the Desktop / Tablet image add: hide-on-mobile
for the Mobile image add: hide-on-desktop hide-on-tablet
Great stuff - will give that a crack. Thanks
Worked a treat. Thanks again.
Glad to be of help!
