2 columns (mobile only) for 1

Site URL: https://www.beststreetartstudios.com.au/

Hello,

[data-section-id="613300f85ee71865228d8aed"]

https://www.beststreetartstudios.com.au/

I'd like to display these product blocks in 2 columns on mobile devices. 

Sorry - I know this has been asked tonnes of times, but I can't work it out for this section/these blocks. 

Thanks,

could do something like this:

@media screen and (max-width: 767px) {
 section[data-section-id="613300f85ee71865228d8aed"] .sqs-layout .sqs-row:nth-child(2) [class*=sqs-col] {
    float: left !important;
    width: 50% !important;
}

• kicks in up to 767px (same as squarespace mobile styles)
• finds the second row in that section (the one that contains the items)
• sets its float back to left (it gets set to none by the default squarespace mobile layout)
• sets its width to 50% rather than auto to get 2 columns

not sure if there might be more than four items in this view at some point, if so you might need to tweak that nth-child selector to get the rows you want

Cheers Dave. Perfect.