I’m using the horizon theme, and I want to be able to upload a separate hero image for my home page on the desktop and mobile versions of my website. As you can see from the pictures, the current mobile version cuts off a lot of the image. Is there a way to add an option to upload two separate images so this doesn’t happen?
Hi @EastsideMelrose ,
Yes its possible. It require some custom code so If you’d like me to handle it, please share the collaborator code so I can edit the theme accordingly. Thank you
Dear, this isn’t possible with just CSS — I’ll need to add custom code in the theme files.
Why would you need the collaborator code to do that? I’ve had plenty of people on this just send the code without that.
you can use other section as hero which is responsive both for mobile and desktop.
I use canva
I make separate images for desktop and mobile
my images are 2048 x 1024 desktop and 1024 x 1024 for mobile
You can create another hero section and upload a mobile image. Then, please add the code below to the Custom CSS for each section.
Code for desktop section
@media (min-width: 749px) {
.hero { display: none; }
}
Code for mobile section
@media (max-width: 750px) {
.hero { display: none; }
}
Best regards,
Dan from Ryviu: Product Reviews App