Have 2 Different Portfolios with different column sizes (3, and 2)

Site URL: https://star-caterpillar-ej7s.squarespace.com/digital

Hi all, I saw some previous posts that mentioned adding custom css to 1 of the Portfolio's to change the column items. But in adding that in for my specific portfolio it's still showing 3 columns instead of 2 columns.

Maybe I have the wrong collection ID? I used inspect element in chrome to get that value: 60f654bdb2b0835cff993261

#collection-60f654bdb2b0835cff993261
[class^="portfolio-grid-"] {

  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  
  }

3 hours ago, Candelaria said:

Site URL: https://star-caterpillar-ej7s.squarespace.com/digital

Hi all, I saw some previous posts that mentioned adding custom css to 1 of the Portfolio's to change the column items. But in adding that in for my specific portfolio it's still showing 3 columns instead of 2 columns.

Maybe I have the wrong collection ID? I used inspect element in chrome to get that value: 60f654bdb2b0835cff993261

 

#collection-60f654bdb2b0835cff993261
[class^="portfolio-grid-"] {

  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  
  }

 

Hi. Your site is private. Can you setup password & share url again?

Yup I updated the site with pw: squarespace

and the URL is: https://star-caterpillar-ej7s.squarespace.com/digital

On 7/21/2021 at 10:26 AM, Candelaria said:

Yup I updated the site with pw: squarespace

and the URL is: https://star-caterpillar-ej7s.squarespace.com/digital

Hi. I see 2 columns here. Did you solve the problem?

No I just redesigned my portfolio to be in sets of 2 😕 couldn't figure it out

6 hours ago, Candelaria said:

No I just redesigned my portfolio to be in sets of 2 😕 couldn't figure it out

Can you share link to page where you want to set 2 columns? We can give the code to change 3 to 2 columns

Yes, this is the page I want to set to 2 columns: 

https://star-caterpillar-ej7s.squarespace.com/digital

pw: squarespace

8 hours ago, Candelaria said:

Yes, this is the page I want to set to 2 columns: 

https://star-caterpillar-ej7s.squarespace.com/digital

pw: squarespace

 

Add to Design > Custom CSS

/* Digital page 3 to 2 columns */
body#collection-60f654bdb2b0835cff9931d1 div#gridThumbs {
    grid-template-columns: repeat(2,1fr);
}

This worked perfect thank you!

Yes, I need help as the above code works great on desktop, but on mobile those elements stay side to side and the text is breaking across a few lines and doesn't look good. How could I have this show up better on mobile?

On 8/25/2021 at 6:48 AM, Candelaria said:

Yes, I need help as the above code works great on desktop, but on mobile those elements stay side to side and the text is breaking across a few lines and doesn't look good. How could I have this show up better on mobile?

Hi,

Do you want them stacked on mobile only?