Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Gnadsy

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

Question

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.

Edited by Gnadsy
Initial Revision

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 1

@Gnadsy Your code is invalid.

Can you share site url?


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post
  • 0

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.

Edited by Gnadsy

Share this post


Link to post
  • 0

@Gnadsy https://beaverhero.com/squarespace-how-to/#HowtoSetupPasswordShareSiteURL


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post
  • 0

@Gnadsy What is access password?


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post
  • 0

@Gnadsy you mean banner image under logo?


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...