Jump to content

Code for side by side images in mobile view?

Recommended Posts

Hi!

I have this collage of images on desktop view that I built with blocks.

image.thumb.png.a2bd5c25fc3d3b75f25d77d776cfb68b.png

Obviously this doesn't translate to mobile view so I was trying to add some code to change it just on mobile view. 

So far I've managed to reduce the size of the images just on mobile, as they looked massive before, but I'd like to be able to display some of them side by side, at least 2 or 3 of them - is there a code for this that includes block IDs, so that I can select specific images I would like to pair up? This is the code I've used so far:

Screenshot2023-07-26at22_52_46.thumb.png.a132427775fdbd51346f5509e9eb2dac.png

Thanks!

 

Link to comment
  • Replies 5
  • Views 722
  • Created
  • Last Reply

Top Posters In This Topic

1 hour ago, tuanphan said:

side by side, it look like not possible, but you want 1 - 2 - 1 - 2, it is possible

or 3 items/row is possible

That sounds good, I'd be happy to try both! Do you know what the code would be for both of them?

Link to comment
21 hours ago, hywel said:

That sounds good, I'd be happy to try both! Do you know what the code would be for both of them?

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-64b5c4dd2ac8d15fb5d21e8d .span-2:nth-child(3) .image-block, div#page-64b5c4dd2ac8d15fb5d21e8d .span-2:nth-child(5) .image-block {
    clear: none !important;
    width: calc(~"50% - 34px") !important;
    float: left !important;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.