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

How to display a specific hero image on mobile

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.

 

Share this post


Link to post

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
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


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
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


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
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

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