Would like image blocks on homepage to appear in two columns, not stacked, in mobile view

Site URL: https://turtle-groundhog-6gtg.squarespace.com/

I have a section of four poster image blocks on a homepage that I would like to appear in two columns (so they appear as 2x2), not stacked (1x4), when viewed on mobile devices.  I can get them to appear at the desired smaller size in mobile with some css code I've added, but they're still stacked, one column wide, one on top of the other.  Any advice on css changes/additions would be appreciated!

https://turtle-groundhog-6gtg.squarespace.com/
pw: mockup

Thanks!

The last image is in it's own DIV. Can you check your set up to see if it's in it's own section or has somehow become separate to the others?

Hmm that certainly wasn't intentional.  It appeared to be in the same section, but just in case there was something funny going on when I originally added the images, I have since deleted and reinserted the contents of the section from scratch.  I updated the block IDs in the css code, but the same issue as before is occurring (reducing in size but remaining stacked rather than appearing in two columns).

Please let me know if there's something else I should try on my end if it's still showing up separately.

thx

Are you placing the 4 images yourself, as posters within a section? Now the first one is in it's own DIV & the other 3 are in another DIV. Unless they are all in the same DIV it's going to be hard to style them together.

These are 4 posters I created in a section by adding 4 posters one under the other, then just dragging 2 of them up one by one to be beside the first one.

These are yours, with the first one being span-3 by itself, then the other 3 falling together in a span-9.

I had done what you described (adding 4, one under the other, and then dragging them up one by one to be beside each other), so I don't know why they would be appearing in different DIVs like this.  I'll try doing it again, and see if I can get them all into one span-3.

Thanks for your input, and patience!

1 hour ago, loueeze said:

Are you placing the 4 images yourself, as posters within a section? Now the first one is in it's own DIV & the other 3 are in another DIV. Unless they are all in the same DIV it's going to be hard to style them together.

These are 4 posters I created in a section by adding 4 posters one under the other, then just dragging 2 of them up one by one to be beside the first one.

These are yours, with the first one being span-3 by itself, then the other 3 falling together in a span-9.

Update:  @loueeze I now have all four of the posters in the same DIV

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5f19fabd42e0a40603b79726>.row:nth-child(2)>.col {
    width: 50% !important;
    float: left !important;
}
div#page-section-5f19fabd42e0a40603b79726>.row:nth-child(2)>.col .sqs-block-content {
    width: 100% !important;
}
}

Thank you, @tuanphan!

Looks like it's not working, though. I still see 1 column.

Any ideas why?

Thanks again for your help!

4 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5f19fabd42e0a40603b79726>.row:nth-child(2)>.col {
    width: 50% !important;
    float: left !important;
}
div#page-section-5f19fabd42e0a40603b79726>.row:nth-child(2)>.col .sqs-block-content {
    width: 100% !important;
}
}

 

Thank you so much @tuanphan this does exactly what I was looking for!