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

How to display a specific hero image on mobile


JuBalas

Question

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.

 

Link to post
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Posted Images

6 answers to this question

Recommended Posts

  • 0

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.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, Variant Availability and Datepicker Extension
Note that links in my posts may be affiliate links. Need personal help? 
Book a Squarespace Expert.

Link to post
  • 0

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

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, Variant Availability and Datepicker Extension
Note that links in my posts may be affiliate links. Need personal help? 
Book a Squarespace Expert.

Link to post
  • 0

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.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, Variant Availability and Datepicker Extension
Note that links in my posts may be affiliate links. Need personal help? 
Book a Squarespace Expert.

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