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 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; } } BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, 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 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! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.