SouthernSunEvents Posted February 25, 2021 Share Posted February 25, 2021 Site URL: http://www.southernsunevents.com I have 4 images in a 2 column style on the desktop version of my site. I'd like to rearrange the mobile view order to reflect: Nir + Natalie/The North Carolina Arboretum/Megan + Kyle/The Museum of Fine Arts, Houston Anyone know how to switch the bottom two images to reflect this on mobile? It's currently Nir + Natalie/The North Carolina Arboretum/The Museum of Fine Arts, Houston/Megan + Kyle/ Thanks so much! site URL: www.southernsunevents.com PW: sse2020 Beyondspace 1 Link to comment
Beyondspace Posted February 25, 2021 Share Posted February 25, 2021 5 hours ago, SouthernSunEvents said: Site URL: http://www.southernsunevents.com I have 4 images in a 2 column style on the desktop version of my site. I'd like to rearrange the mobile view order to reflect: Nir + Natalie/The North Carolina Arboretum/Megan + Kyle/The Museum of Fine Arts, Houston Anyone know how to switch the bottom two images to reflect this on mobile? It's currently Nir + Natalie/The North Carolina Arboretum/The Museum of Fine Arts, Houston/Megan + Kyle/ Thanks so much! site URL: www.southernsunevents.com PW: sse2020 try @media screen and (max-width: 768px) { #collection-5e1df5f56b4ecf142af1d0d5 .sqs-layout .row:nth-child(1) .sqs-col-6 { width: 100%; } #collection-5e1df5f56b4ecf142af1d0d5 .sqs-layout .row:nth-child(1) .sqs-col-6 .image-block { width: 50%; float: left; clear: none; box-sizing: border-box; } } Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
SouthernSunEvents Posted February 26, 2021 Author Share Posted February 26, 2021 (edited) On 2/25/2021 at 6:43 PM, bangank36 said: try @media screen and (max-width: 768px) { #collection-5e1df5f56b4ecf142af1d0d5 .sqs-layout .row:nth-child(1) .sqs-col-6 { width: 100%; } #collection-5e1df5f56b4ecf142af1d0d5 .sqs-layout .row:nth-child(1) .sqs-col-6 .image-block { width: 50%; float: left; clear: none; box-sizing: border-box; } } @bangank36Original looks like this with the 4. Which is what I'm looking for but just to switch the bottom two photos to rearrange the order. Here's what I got with that code: Thanks so much for your help on this one! Edited March 2, 2021 by SouthernSunEvents Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment