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

Images to stop stacking on mobile


jilldiane_

Question

  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

4 answers to this question

Recommended Posts

  • 0

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
  • 0

Hi,

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

Create an account or sign in to comment

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


×
×
  • Create New...