abeonboard Posted May 27, 2022 Share Posted May 27, 2022 Site URL: https://www.hairdesignhelsinki.fi/verkkokauppa-testi Hi guys! How could I get these brand images to display in 3 columns on mobile? Squarespace 7.0 automatically hides span-2 columns so I gave it a width to show up again. However I can't figure out how to make them side by side? P.S. The reason I am not using the gallery option is that it is very slow to load... Regular pictures is a lot faster! Link to comment
Beyondspace Posted May 30, 2022 Share Posted May 30, 2022 On 5/28/2022 at 3:21 AM, abeonboard said: Site URL: https://www.hairdesignhelsinki.fi/verkkokauppa-testi Hi guys! How could I get these brand images to display in 3 columns on mobile? Squarespace 7.0 automatically hides span-2 columns so I gave it a width to show up again. However I can't figure out how to make them side by side? P.S. The reason I am not using the gallery option is that it is very slow to load... Regular pictures is a lot faster! Have you figured it out? I check it is fine at the moment 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
abeonboard Posted May 31, 2022 Author Share Posted May 31, 2022 (edited) Here below is the code that made this finally work on the live store: hdh.fi/verkkokauppa The way it works I have 1st row of 6 pictures on desktop view all .span-2. The 2nd row of 2 pictures + 4 spacers all .span-2. If one picture is not .span-2 this won't work. The best method achieve span-2 on every image is to enclose the pictures between two "line" blocks and then delete the line bloks. Above the row needs to be a spacer that is used to make this right. The second spacer between row of 6 and row of 2 I am hiding the spacer entirely, so the continuation of the list looks natural. See the picture attached why BLOCK ID + ROW .SPAN-2 is in the code. ... Breaking points I am using. @mobile: ~"only screen and (max-width: 750px)"; @tablet: ~"only screen and (min-width: 751px)"; @tablet-strict: ~"only screen and (min-width: 751px) and (max-width: 949px)"; @tablet-desktop: ~"only screen and (min-width: 751px)"; @desktop: ~"only screen and (min-width: 950px)"; @desktop-strict: ~"only screen and (min-width: 950px) and (max-width: 1199px)"; @desktop-xl: ~"only screen and (min-width: 1200px)"; Images on 3 row’s on mobile /*//////////////////////////////////// // VERKKOKAUPPA: Brand pictures .span-2 Show on mobile + 3 columns view. ////////////////////////////////////*/ /*/////////////////////////////////// // 1ST ROW: Fix spacer margin on mobile */ #block-yui_3_17_2_1_1653901313424_14498{ @media @mobile { height: 0px; margin-bottom: -15px; } } /*/////////////////////////////////// // 1ST ROW: Show .span-2 */ @media @mobile { div#block-yui_3_17_2_1_1653901313424_14498+.row .span-2 { width: 33.3333% !important; float: left !important; } /*/////////////////////////////////// // 1ST ROW: Make .span-2 3 columns on mobile */ div#block-yui_3_17_2_1_1653901313424_14498+.row .span-2:nth-child(3n+1) { clear: left !important; } /*/////////////////////////////////// // 1ST+2ND ROW: Style .span-2 padding on mobile */ div#block-yui_3_17_2_1_1653901313424_14498+.row .sqs-block, div#block-yui_3_17_2_1_1653902085842_58799+.row .sqs-block { padding-left: 10px; padding-right: 10px; padding-top: 5px !important; padding-bottom: 5px !important; } } /*/////////////////////////////////// // 2ND ROW: Show .span-2 */ @media @mobile { div#block-yui_3_17_2_1_1653902085842_58799+.row .span-2 { width: 33.3333% !important; float: left !important; } } /*/////////////////////////////////// // 2ND ROW: Hide above spacer */ #block-yui_3_17_2_1_1653902085842_58799 { display:none; } Edited May 31, 2022 by abeonboard 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