Jump to content

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

Recommended Posts

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!

Screen Shot 2022-05-27 at 11.09.56 PM.png

Screen Shot 2022-05-27 at 11.19.58 PM.png

Screen Shot 2022-05-27 at 11.19.32 PM.png

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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!

Screen Shot 2022-05-27 at 11.09.56 PM.png

Screen Shot 2022-05-27 at 11.19.58 PM.png

Screen Shot 2022-05-27 at 11.19.32 PM.png

Have you figured it out? I check it is fine at the moment

image.png.efa96a224942193a0085e39aab6a63cc.png

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, Keyword Highlighter
If 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

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;

}

Screen Shot 2022-05-31 at 9.19.45 AM.png

Screen Shot 2022-05-31 at 9.20.04 AM.png

Screen Shot 2022-05-31 at 9.22.20 AM.png

Edited by abeonboard
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.