How to display a specific hero image on mobile

Hello there, 

i'm referring to a 5 years old post below about how to display a specific image on mobile. Despite the explanation from this former post i can't make it work on my Brine template. (It's a client website i'm working on so i can't share the website address, it's not live yet).

I followed the instructions and add this exact peace of code in the css properties :

@media only screen and (max-width: 640px) { .collection-type-template-page #outerWrapper  { background-image: url("https://static1.squarespace.com/static/5d94a9d780be461d94a3a7c6/t/5e218fddbb909c4a01c07e26/1579257826981/ImmeubleTLH_exterieur_versionfoncee_formatweb_V2.jpg"); background-size: cover !important; 
  }}

Does anyone see something that i could have missed ?

Thank's in advance for your help !

Julien

Quote

Hi Jeff,

The background image and related CSS properties the home page currently has (at desktop sizes) are:

.collection-type-template-page #outerWrapper  {  background-image: url("http://static1.squarespace.com/static/560d7230e4b0a4c7e9582606/t/560e9ee2e4b01316733a433f/1443798754915/sitebghome.jpg");  background-position: center center;  background-size: cover;  background-attachment: fixed;  background-repeat: no-repeat;}

 

For an explanation of what the various background properties mean and do, see the w3schools' article CSS Background and the MDN article background.

You must have uploaded the current background image to Squarespace. If you don't want to do the same again with another image but want instead to use an image off the web, just substitute the url to your new image for the current url (http://static1.squarespace....) and put the CSS in Design > Custom CSS. You needn't put all the background property declarations in Custom CSS, just the ones you modify.

If at first it seems not to work, add !important to the individual declarations. Thus, e.g., background-size: cover !important;.

Whatever declarations you change, you will need to enclose them all in a media query. Thus:

@media only screen and (max-width: 640px) {  .collection-type-template-page #outerWrapper  {    /* property declarations here */  }} 

 

I hope this answers your question. If not, let me know.

For us to see the settings that are in use, we really need a working link to the page on the site. If the site isn't live yet, you can share a link by setting a site password and then tell us what it is. This will prevent access by the general public but allow the forum community to see the issue.

Hi @paul2009,

thank you for your answer. Here are the details :

Site : https://thelighthousescaprim.squarespace.com

Password : 'CN8DAUvV

Thx !

Which page has the hero image that you want to change?

The homepage @paul2009, see attached files.

Hello @paul2009, have you seen my answer ? What do you think ?

I need help ! 😉

Your homepage banner looks like a Gallery Page, but I see it's just one banner image comprised of three images and some whitespace. That's why it gets cropped.

You may want to consider swapping this page for a Gallery Page with separate images. You'd need to set the layout in Site Styles to match your current look, but it would be responsive and would adjust automatically to become three separate images on mobile.

If you don't want to use a Gallery Page, one other option is to add another section that's almost a duplicate but with the image that suits mobile. You could then use media queries to show just one of the banner sections, according to the device being used.

I hope that helps.