Jump to content

Change image in block on mobile to reduce load times

Recommended Posts

My client is unhappy with the load times for mobile usage on her website. I have reduced image sizes, and it's still not passing. I am now attempting to change the main banner images on certain pages to smaller images. For example, on the page referenced, I am using the code below (referenced from this site); however, it's not working. Could someone kindly have a look and let me know what I am doing wrong? Many thanks for considering my request.

@media only screen and (max-width: 640px) {
section[data-section-id="64a583d770414f55c2df2aa0"] #block-6561dc22af410a83fb81 {
#page .page-section:nth-child(1) .section-background img {
opacity:0 
}
#page .page-section:nth-child(1)  .section-background {
background-image: url(https://images.squarespace-cdn.com/content/6345cf66a093cc730bf62cb5/ef3024cc-840c-46a3-a727-f28b8ba14365/Dominica_Victoria%2BFalls%2B1_karibu_adventures%2Bcopy.jpg?content-type=image%2Fjpeg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
  }
 }
}
 

Link to comment
  • Replies 1
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

This code only changes the size of the file, it can not the capacity of the file. You can compress it from your pc before uploading to SS site

and your code have some invalid class name, it should be

@media only screen and (max-width: 640px) {
section[data-section-id="64a583d770414f55c2df2aa0"] .section-background img {
opacity:0 
}
section[data-section-id="64a583d770414f55c2df2aa0"]  .section-background {
background-image: url(https://images.squarespace-cdn.com/content/6345cf66a093cc730bf62cb5/ef3024cc-840c-46a3-a727-f28b8ba14365/Dominica_Victoria%2BFalls%2B1_karibu_adventures%2Bcopy.jpg?content-type=image%2Fjpeg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
  }
 }

replace with your data-section-id

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

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