Jump to content

How to display a specific hero image on mobile

Recommended Posts

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 comment
  • Replies 6
  • Views 2k
  • Created
  • Last Reply

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.

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment

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

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment

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.

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

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.