Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


R_Haag
Go to solution Solved by tuanphan,

Question

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 post
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Posted Images

8 answers to this question

Recommended Posts

  • 0

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

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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?

Link to post
  • 0

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 post
  • 0

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 post
  • 0

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 post
  • 0
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 post
  • 0
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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...