kourtnieriv Posted November 30, 2021 Share Posted November 30, 2021 Site URL: https://cone-saffron-cgrj.squarespace.com/about Hello, I would like to place the first two images side by side in mobile view like they are displayed in desktop view rather than being stacked. There are also three images at the bottom of the page that I have the same problem with.I've tried everything to make it work and I can't seem to figure it out. I'd love someones help with this. Thank you in advance! Beyondspace 1 Link to comment
Beyondspace Posted December 1, 2021 Share Posted December 1, 2021 8 hours ago, kourtnieriv said: Site URL: https://cone-saffron-cgrj.squarespace.com/about Hello, I would like to place the first two images side by side in mobile view like they are displayed in desktop view rather than being stacked. There are also three images at the bottom of the page that I have the same problem with.I've tried everything to make it work and I can't seem to figure it out. I'd love someones help with this. Thank you in advance! Could you enable site wide password so we can help easier BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
kourtnieriv Posted December 1, 2021 Author Share Posted December 1, 2021 12 hours ago, bangank36 said: Could you enable site wide password so we can help easier Yes, I enabled a site wide password which is portfoliosite123 Link to comment
Beyondspace Posted December 1, 2021 Share Posted December 1, 2021 Try adding to Home > Design > Custom Css @media only screen and (max-width: 767px) { section[data-section-id="61a570d486659c7cf296a03f"] .sqs-layout .span-10 .span-5 { width: 50% !important; float: left !important; } } Let me know how it works Support me by pressing 👍 if this useful for you BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
kourtnieriv Posted December 1, 2021 Author Share Posted December 1, 2021 22 minutes ago, bangank36 said: Try adding to Home > Design > Custom Css @media only screen and (max-width: 767px) { section[data-section-id="61a570d486659c7cf296a03f"] .sqs-layout .span-10 .span-5 { width: 50% !important; float: left !important; } } Let me know how it works Support me by pressing 👍 if this useful for you It worked! Thank you. Is there any way I can move the images closer together? Link to comment
kourtnieriv Posted December 1, 2021 Author Share Posted December 1, 2021 24 minutes ago, bangank36 said: Try adding to Home > Design > Custom Css @media only screen and (max-width: 767px) { section[data-section-id="61a570d486659c7cf296a03f"] .sqs-layout .span-10 .span-5 { width: 50% !important; float: left !important; } } Let me know how it works Support me by pressing 👍 if this useful for you How would I translate this code to work for the three images I have at the bottom of the page? Link to comment
tuanphan Posted December 4, 2021 Share Posted December 4, 2021 @kourtnieriv Don't remove above code #1. To reduce space, add this CSS /* Mobile - about images */ @media screen and (max-width:767px) { /* left image */ div#block-yui_3_17_2_1_1638284585867_2289 { padding-right: 5px !important; } /* right image */ div#block-yui_3_17_2_1_1638284585867_3326 { padding-left: 5px !important; } } #2. For 3 images at bottom of page, use this CSS /* Mobile - about 3 images */ @media screen and (max-width:767px) { div#page-section-61a641c039c80d10d891a139 { &>.row>.span-4 { width: 33.3333% !important; float: left !important; } &>.row>.span-8 { width: 66.6667% !important; float: left !important; } &>.row>.span-8>.row>.span-4 { width: 50% !important; float: left !important; } } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
kourtnieriv Posted December 7, 2021 Author Share Posted December 7, 2021 On 12/4/2021 at 2:47 AM, tuanphan said: @kourtnieriv Don't remove above code #1. To reduce space, add this CSS /* Mobile - about images */ @media screen and (max-width:767px) { /* left image */ div#block-yui_3_17_2_1_1638284585867_2289 { padding-right: 5px !important; } /* right image */ div#block-yui_3_17_2_1_1638284585867_3326 { padding-left: 5px !important; } } #2. For 3 images at bottom of page, use this CSS /* Mobile - about 3 images */ @media screen and (max-width:767px) { div#page-section-61a641c039c80d10d891a139 { &>.row>.span-4 { width: 33.3333% !important; float: left !important; } &>.row>.span-8 { width: 66.6667% !important; float: left !important; } &>.row>.span-8>.row>.span-4 { width: 50% !important; float: left !important; } } } Thank you so much! I really appreciate your help Link to comment
ajgorkin Posted July 4, 2022 Share Posted July 4, 2022 Hi! I'd love to do the same for my homepage. I'd love to show the first set of Image blocks in rows of 4 on mobile like they are on desktop and tablet. www.andreworkinmusic.com Link to comment
tuanphan Posted July 4, 2022 Share Posted July 4, 2022 1 hour ago, ajgorkin said: Hi! I'd love to do the same for my homepage. I'd love to show the first set of Image blocks in rows of 4 on mobile like they are on desktop and tablet. www.andreworkinmusic.com Add to Design > Custom CSS @media screen and (max-width:640px) { div#page-6183cf0a1e84e05f87639de9 .span-3 { width: 25% !important; float: left !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
ajgorkin Posted July 5, 2022 Share Posted July 5, 2022 (edited) On 7/4/2022 at 6:44 PM, tuanphan said: Add to Design > Custom CSS @media screen and (max-width:640px) { div#page-6183cf0a1e84e05f87639de9 .span-3 { width: 25% !important; float: left !important; } } Amazing thank you!! Is it possible to do the same for the four summary blocks below as well? Edited July 5, 2022 by ajgorkin Link to comment
tuanphan Posted July 6, 2022 Share Posted July 6, 2022 1 hour ago, ajgorkin said: Amazing thank you!! Is it possible to do the same for the four summary blocks below as well? Use this new code @media screen and (max-width:640px) { div#page-6183cf0a1e84e05f87639de9 .span-3 { width: 25% !important; float: left !important; } div#block-yui_3_17_2_1_1636116360889_222661 .summary-item { width: calc(~"50% - 20px") !important; float: left !important; padding: 0 !important; clear: none !important; } div#block-yui_3_17_2_1_1636116360889_222661 .summary-item:nth-child(2n+1) { margin-right: 20px !important; clear: left !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MieleMiel Posted February 1 Share Posted February 1 Hi! I'd want to do the same for the three images on my page. Unfortunately on mobile the 3 images are not displayed side by side. Site: https://mikebroeken.squarespace.com/ Password: Miele1234 Desktop Mobile Link to comment
tuanphan Posted February 3 Share Posted February 3 On 2/1/2023 at 9:07 PM, MieleMiel said: Hi! I'd want to do the same for the three images on my page. Unfortunately on mobile the 3 images are not displayed side by side. Site: https://mikebroeken.squarespace.com/ Password: Miele1234 Desktop Mobile Do this for all pages or? And can you share link to page in screenshot? We can check code easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MieleMiel Posted February 3 Share Posted February 3 7 hours ago, tuanphan said: Do this for all pages or? And can you share link to page in screenshot? We can check code easier Yes I want to do this for all pages with 3 images. So on mobile they are also side by side. The link to the page is: https://mikebroeken.squarespace.com/project-one-alg3z-438ns-pcbnn-ejck9-6d43w-s6839 Link to comment
tuanphan Posted February 8 Share Posted February 8 On 2/3/2023 at 10:05 PM, MieleMiel said: Yes I want to do this for all pages with 3 images. So on mobile they are also side by side. The link to the page is: https://mikebroeken.squarespace.com/project-one-alg3z-438ns-pcbnn-ejck9-6d43w-s6839 Add to Design > Custom CSS @media screen and (max-width:767px) { .gallery-grid-wrapper { grid-template-columns: repeat(3,1fr) !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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