abeonboard

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;

}

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!

I confirmed with Squarespace Customer Support that Web APP link such as "?category=" does not work with #anchor-id. I hired someone from UpWork to fix the issue with jQuery. You can see the working function here: hdh.fi/verkkokauppa

Site URL: https://www.hdh.fi/verkkokauppa

I am using images to filter the Store by categories.

The problem is that images take so much space the user won't see the filter results. I want to use an anchorlink to automatically scroll to the product results, but have hard time figuring out a solution!

Would anyone know of a handy trick for this?

Thank you so much! @tuanphan That absolutely worked! I just wish I could make that on my own the next time but you seem to a wizard with (>.colum.row + & - 2nd child) code stuff. Do you know of any website that teaches looking into these elemnts?

I have this same question! @tuanphan

How can I make two image blocks appear side by side on mobile?

Website link: https://zarahemla.squarespace.com/
Section 4: Zarahemla in the news

It seems to work now! Thanks so much for this!!

The problem continues!

I am trying to replicate this to the LIVE store and nothing shows up?? Can you spot the issue?

URL: hdh.fi/verkkokauppa

I added the following and got only the first row to behave like I imagined. Still need to work on this.

Would you have suggestions?
 

#block-yui_3_17_2_1_1635755049107_3901+.row .image-block {
    width: 140px;
}

.row .sqs-row{
      width: fit-content !important;
    margin:auto !important;
} 

It seemed to work just by increasing the width to 140px.

Is there even a better way to do auto width for perfect row's?

If not then thank you so much!! I'll try to figure out how to align center meanwhile because the width now will leave empty space to the right dpeending on the mobile phone used.

Best,
Abe
 

This is how it looks now!

How could I make the mobile show in row of 2's. (Two pictures side by side instead of three)?

Thanks so much! Great progress so far!!

Site URL: https://www.hdh.fi/verkkokauppa-testi

Hi there!

I have a nice row of product pictures on desktop but on mobile all the pictures disappear!? If I increase the image size this does not happen... Can anyone help?

 

Thanks for asking!

I want to translate the button to "Lisää ostoskoriin". How to that in code so I don't have to edit all the products individually and possibly miss some during the process?

Thanks so much!!
–Abe

I have this same question!

I have a store with 200 products. How can I translate or hide/show the add to cart button and replace it with text "Lisää Ostoskoriin" without doing the manual work and perhaps miss some of the products?
 

www.hdh.fi/verkkokauppa

I have the same question!
Google Search Console can't find any CLS free url from my site 🤯
According to google squarespace does not have any good links? Not even 1.