Jump to content

Different image on cover page for mobile and desktop version

Recommended Posts

  • Replies 6
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

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!

Edited by SuzetteJewelry
Link to comment

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
 

Screenshot 2024-02-06 153325.png

Link to comment
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>

image.png.85729e30bd4d2d292bf24eaeda5f080c.png

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?

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
 

Screenshot 2024-02-06 153325.png

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.