DIFFERENT BACKGROUND IMAGE FOR MOBILE VERSION

Hi,

I want to have a different image for the mobile version of my landing page. The desktop image is a landscape format image that fits great, but when on mobile, it looks weird. I would like to use CSS code to make a different image appear in the background when on mobile.

Thanks

Hi,

You can share link to page where you have problem, I think we can use CSS code to resize image on mobile

Hi,

Sure, here is the link : www.caribou.studio

Thanks!

On 3/28/2024 at 7:12 AM, cariboustudio said:

Hi,

Sure, here is the link : www.caribou.studio

Thanks!

You mean the kid image on top of page? You can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:991px) {
[data-section-id="6606d1401a1965585d987265"] {
    min-height: unset !important;
    height: 60vh;
}
}

This code will resize image on mobile, but if you need code to replace with new image, let me know, I will give another code.

Hi, thanks for the code. 

And yes, I want to replace with a different image. I managed to do it by creating different sections and display only one on mobile and the other on desktop. But if you know a simpler code, that would be great. I wouldn't have to create different sections in the future.

On 4/1/2024 at 10:54 PM, cariboustudio said:

Hi, thanks for the code. 

And yes, I want to replace with a different image. I managed to do it by creating different sections and display only one on mobile and the other on desktop. But if you know a simpler code, that would be great. I wouldn't have to create different sections in the future.

You can send me image file, I can give code to replace desktop image with this image on mobile, so need to need to create a second section

Hi, here is the image for mobile. Thanks!

I see you added 2 sections and show 1 on mobile. Do you still need help?

Hi,

It works fine this way. But if you have a code that would allow me to have only one section, but different images on mobile versus desktop, I would like to know it. Thank you!

On 4/9/2024 at 11:36 PM, cariboustudio said:

Hi,

 

It works fine this way. But if you have a code that would allow me to have only one section, but different images on mobile versus desktop, I would like to know it. Thank you!

You can duplicate the page & share link to duplicated page, I can give code for this page, then if it works, I will adjust code for main page

OK, I duplicated the page and here is the link to the copy : https://caribou.studio/home-1

On 4/16/2024 at 11:03 PM, cariboustudio said:

OK, I duplicated the page and here is the link to the copy : https://caribou.studio/home-1

Use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="661ea105dada2b0e8477b680"] img {
    content: url(https://content.invisioncic.com/p289038/monthly_2024_04/caribou-PE24-background-mobile.thumb.jpg.9ced126e830618173bd5175548d5a9cc.jpg);
}
}

Works like a charm 🙂

Thanks so much!