Guest Posted July 22, 2020 Share Posted July 22, 2020 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
stressbunny Posted July 22, 2020 Share Posted July 22, 2020 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 comment
Guest Posted July 23, 2020 Share Posted July 23, 2020 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
stressbunny Posted July 23, 2020 Share Posted July 23, 2020 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. Link to comment
Guest Posted July 23, 2020 Share Posted July 23, 2020 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
Guest Posted July 23, 2020 Share Posted July 23, 2020 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 Link to comment
tuanphan Posted July 24, 2020 Share Posted July 24, 2020 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
bbarinaga Posted July 24, 2020 Share Posted July 24, 2020 Thank you, @tuanphan! Looks like it's not working, though. I still see 1 column. Any ideas why? Thanks again for your help! Link to comment
Guest Posted July 24, 2020 Share Posted July 24, 2020 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.