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

Different Banner Image on Mobile

Go to solution Solved by christyprice,


Hello! So my site is  https://earthlycraft.co/

It's almost there... but i cant work one thing out. How to change one of my banner hero images for mobile. It looks great on desktop however its too small on mobile,  so i have another logo ready thats zoomed right in that i'd like to use for mobile only. I've added the file in design > custom css > manage custom files so i can use the link to the file

I'm fairly familiar with media queries but i don't know the code to change the banner. When I inspect I get this code:

.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .intrinsic .image-block-wrapper img

Therefore i'm going for something along the lines of:

@media only screen and (max-width: 600px) {.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .intrinsic .image-block-wrapper img {background image: https://static1.squarespace.com/static/5d00032088447c0001487495/t/5dcdc90c40062f0cf29e9ddc/1573767446853/mobilelogo.png;}}

Help would be much appreciated!!




Link to post
  • Answers 51
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

ETA: If you are on the newer Squarespace 7.1, this post has a walkthrough: How to Show a Different Banner Image on Mobile in Squarespace   Hi @Joeyearthly, If you are using an index pag

If you are on 7.1, here are new instructions: How to Show a Different Banner Image on Mobile in Squarespace

Oh my goodness, amazing! I couldn't work out where to add a margin or some padding but you've solved it for me. Thank you so much, you've solved a real headache!

Posted Images

Recommended Posts

Create an account or sign in to comment

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

  • Create New...