Jump to content

Rearrange Separate Gallery Blocks (Mobile)

Recommended Posts

Site URL: http://noname.squarespace.com

Each of the main 4 images are separate stacked gallery blocks with 2 images to produce a rollover effect using this code: https://www.ghostplugins.com/steps/110fne84 (So 4 different block id's).

On desktop, they are horizontal and, of course, the responsive design features makes them stack on mobile. However, I would like to have at-least 2 of the gallery blocks side by side on mobile to cut down on scrolling.

I assumed using a mobile css query: 

.sqs-block-gallery {
  width: 50%;
  margin-right: auto;
  margin-left: auto;

to resize them would automatically "lift" them beside each other, but it only resizes and centers them.

I attached what I see on my screen and also what I am trying to achieve. If it would be simpler, I am willing to just change them to image blocks or just use code to apply the images in order to achieve it.

 

 

 

Screen Shot 2022-05-19 at 4.53.31 AM.png

Screen Shot 2022-05-19 at 5.06.33 AM.png

Edited by ixxv
Link to comment
23 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-612d01e55edabd7ccc9b51f5 .span-3 {
    width: 50% !important;
    float: left !important;
}
}

 

Thanks so much! You are a lifesaver! ❤️

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.