Jump to content

Change Image on Stacked Image Block on mobile

Go to solution Solved by Beyondspace,

Recommended Posts

  • Solution
@media only screen and (max-width: 600px) {
  #block-yui_3_17_2_1_1604669061431_13134 .intrinsic > div {
      padding-bottom: 204%;
    	background: url(REPLACE-YOUR-URL) no-repeat;
  		background-size: cover;
  }
  #block-yui_3_17_2_1_1604669061431_13134 img {
    	display: none;
  }
}

Please do the following things

1. Upload the image and get its url from custom css panel

Using the CSS Editor – Squarespace Help

2. Replace the image url to this code and add it to Settings->Design->Custom css

image.thumb.png.0e2f71aa8e5448dec2ceced44d503295.png

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
21 minutes ago, bangank36 said:

@media only screen and (max-width: 600px) {
  #block-yui_3_17_2_1_1604669061431_13134 .intrinsic > div {
      padding-bottom: 204%;
    	background: url(REPLACE-YOUR-URL) no-repeat;
  		background-size: cover;
  }
  #block-yui_3_17_2_1_1604669061431_13134 img {
    	display: none;
  }
}

Please do the following things

1. Upload the image and get its url from custom css panel

Using the CSS Editor – Squarespace Help

2. Replace the image url to this code and add it to Settings->Design->Custom css

image.thumb.png.0e2f71aa8e5448dec2ceced44d503295.png

Great!!! Thank you so much!!

Link to comment
  • 1 year later...

I have a horizontal image showing on desktop of 8 instagram images. Normally I would just connect the instagram feed but she didn't want that but instead an 8 image collage. I am trying to show a stacked version on mobile view but it is not showing up. I am not sure if I did it correctly.

On Desktop: 1632751958_InstagramCollage.thumb.png.912e90c73722880a557732c6a50433e9.png

Would like it to look like this on Mobile:

2133171534_InstagramCollagestacked.thumb.png.877bedb7f153b023f0151230f2f9bb24.png

Any help is appreciated.

https://trombone-scarlet-kk6s.squarespace.com/
 

PW: TMCCustomHomes

Link to comment
On 12/18/2021 at 10:46 PM, LulubelleDesignStudio said:

I have a horizontal image showing on desktop of 8 instagram images. Normally I would just connect the instagram feed but she didn't want that but instead an 8 image collage. I am trying to show a stacked version on mobile view but it is not showing up. I am not sure if I did it correctly.

On Desktop: 1632751958_InstagramCollage.thumb.png.912e90c73722880a557732c6a50433e9.png

Would like it to look like this on Mobile:

2133171534_InstagramCollagestacked.thumb.png.877bedb7f153b023f0151230f2f9bb24.png

Any help is appreciated.

https://trombone-scarlet-kk6s.squarespace.com/
 

PW: TMCCustomHomes

It is 1 image, not 8 images, so no need to make 2 images/row on mobile. You can check again

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.