Jump to content

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

Recommended Posts

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!

Link to comment
  • Replies 8
  • Views 1.7k
  • Created
  • Last Reply

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

Link to comment

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.

image.png.3885e56b94d8eceae1c46cee66902d5a.png

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

image.png.6e59ebd6f7813eaf7ed9afb1de71b81a.png

Link to comment

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!

Link to comment
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.

image.png.3885e56b94d8eceae1c46cee66902d5a.png

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

image.png.6e59ebd6f7813eaf7ed9afb1de71b81a.png

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

Screenshot (1).png

Link to comment

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;
}
}

 

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
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!

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.