Different image on cover page for mobile and desktop version

Hello,

the background image on my cover page looks great on desktop. On mobile it cuts out the most important part though.

Is it possible to have different background images for the cover page for mobile and desktop?

Thanks a lot!

Hi,

You can share link to page, we can give code to resize it to fullsize on mobile

Hi, 

this is the page: suzette.eu

Could you also please tell me how to change the font and color of the text on this page and how to move the Heading and the Menu Items to the right in mobile view. 

Thank you very much and also thank you very much for your great work on this forum. Really helps a lot!

I have the same problem. If the slideshow images are set the Medium or Large then they display nicely on the desktop but are too large for the mobile. 

If I set them to small they look great on the mobile but are too small and parts of the image get cut off ont he desktop.

They all look great on the mobile but images are cut off / too small on the desktop.

https://supremecamps.co.uk/
https://supremecamps.co.uk/woldingham-holiday-activity-kids-camps
 

On 2/2/2024 at 2:35 AM, SuzetteJewelry said:

Hello,

the background image on my cover page looks great on desktop. On mobile it cuts out the most important part though.

Is it possible to have different background images for the cover page for mobile and desktop?

Thanks a lot!

You can add this code to Cover Page Settings > Advanced > Header Code Injection

<style>
  @media screen and (max-width:767px) {
  img {
    object-position: 11% 50% !important;
}
  }
</style>

On 2/6/2024 at 8:07 PM, SuzetteJewelry said:

Hi, 

this is the page: suzette.eu

Could you also please tell me how to change the font and color of the text on this page and how to move the Heading and the Menu Items to the right in mobile view. 

Thank you very much and also thank you very much for your great work on this forum. Really helps a lot!

Change color on mobile only or desktop + mobile?

Also I see the text is difficult to read on mobile, do you want to add a dark/light overlay over image?

On 2/6/2024 at 10:33 PM, SupremeTeam said:

I have the same problem. If the slideshow images are set the Medium or Large then they display nicely on the desktop but are too large for the mobile. 

If I set them to small they look great on the mobile but are too small and parts of the image get cut off ont he desktop.

They all look great on the mobile but images are cut off / too small on the desktop.

https://supremecamps.co.uk/
https://supremecamps.co.uk/woldingham-holiday-activity-kids-camps
 

You can use this code to Website > Website Tools (under Not Linked) > Custom CSS

/* mobile resize slideshow */
@media screen and (max-width:991px) {
.gallery-fullscreen-slideshow {
    height: 30vh !important;
}
}

13 hours ago, tuanphan said:

Change color on mobile only or desktop + mobile?

 

Change the color only on mobile.