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.