Logo columns in Mobile grid 7.1?

Site URL: https://smilodon-ocelot-my5f.squarespace.com/lost-america-prints/the-wall-frame-arizona

Hi,

How do I make my award logos appear in 3 columns instead of 2 in MOBILE VIEW?

Add To Home > Design > Custom CSS

/* The wall frame logos */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1597647440130_252727 .slide {
    width: 33.33% !important;
}
div#block-yui_3_17_2_1_1597647440130_252727 .slide img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
}

Thanks - but how do I do this to all pages in my stores?

https://smilodon-ocelot-my5f.squarespace.com/lost-america-prints

https://www.mattportch.com/store

4 hours ago, mportch said:

Thanks - but how do I do this to all pages in my stores?

 

https://smilodon-ocelot-my5f.squarespace.com/lost-america-prints

https://www.mattportch.com/store

try remove block id in above code

Sorry doesn't work? I'm not sure how that code would look?

Tried adding this code to the page header code injection but it doesn't work...

(It does work on these pages: awards, exhibitions, press)

<style>
  @media screen and (max-width:767px) {
  .gallery-grid-wrapper {
    grid-template-columns: repeat(3,auto) !important;
}
  }
</style>

23 hours ago, mportch said:

Thanks - but how do I do this to all pages in my stores?

 

https://smilodon-ocelot-my5f.squarespace.com/lost-america-prints

https://www.mattportch.com/store

I don't see logos?

this is the page - there are logos when you click on each individual frame (product)

https://smilodon-ocelot-my5f.squarespace.com/lost-america-prints

or here for example, under the ADD TO CART button

https://smilodon-ocelot-my5f.squarespace.com/lost-america-prints/picnic-stands-white-sands

@tuanphan

I have many product pages to add this 3 logo gallery config to in mobile view.

Is the only way to duplicate your original CSS and change the id block for each one?

I've started to already. It's a bit laborious and a lot of code.

I wondered if there was a way of making all the logos go into a 3 column configuration with one set of code across the whole site or both pages?

https://smilodon-ocelot-my5f.squarespace.com/lost-america-prints

https://www.mattportch.com/store

You can replace above block id.

https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

Thanks, that's a handy extension!