How to display pictures in 3 columns on mobile – without gallery

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!

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

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