Jump to content

Images to stop stacking on mobile

Recommended Posts

  • Replies 4
  • Views 772
  • Created
  • Last Reply

Hi! There's a couple ways to approach this. I personally recommend you use the Gallery Block -> Grid design. Then I would use Custom CSS to 1. Target that specific gallery block and then target everything but the 1st and 2nd image to be 100% width. Here's an example:

#block-yui_3_17_2_1_1625336195519_3278 .slide:not(:nth-child(1)):not(:nth-child(2)) {
  @media (max-width: 640px) {
    width: 100% !important;

Replace the block-yui_3_17_2_1_1625336195519_3278 with your new Gallery block ID. If you need help finding it after you create the Gallery block let me know.


https://www.nickscola.com - Squarespace developer since 2007 now a full service creative agency in Chicago that focuses on creating websites with a high standard for aesthetic excellence.

Link to comment


You can do this from the editor.

Make sure there are 4 images each next to other.

Currently there is 1 image individually added and 3 images wrapped together.

Move them from the block where they are 3.

I hope you understand what I want to say. Then they will be displayed one on top of each-other.

Screenshot 2021-07-03 at 23.34.58.png

Screenshot 2021-07-03 at 23.37.34.png

Link to comment


Make sure to mark this topic as answered.

Link to comment


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.