Jump to content

How to change the banner image when the site is visited on a mobile device.

Recommended Posts

I am currently using the "Brine" template, and I would love to be able to change the banner image when the site is visited on a mobile device. Can someone advise?

I have tried the following which does not work:

@media (max-width: 600px) { body { }

#banner-area-wrapper #page-thumb img { display: none; }

#banner-area-wrapper #page-thumb { background-image: url("https:example.jpg"); background-size: cover; }}

Thank you for any help you can offer.

Link to comment
  • Replies 8
  • Views 800
  • Created
  • Last Reply

Hi Tuanpan,Site is not published and visibility is on private at the moment. is there anything else I can share with you that would help?

Let me expand:The image has text and it gets cut off when its resized for mobile. I don't see any other way to fix this other than making an image with smaller text that fits a mobile device. So being able to have two images that load when the max width is changed would be ideal.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.