Increase column number from4 to 5 for portfolio page on 7.1

Hi All!

I'm  using portfolio page with Grid: Simple layout for my client's site. Trying to  basically create something to replace a product page -as we can't start e-commerce now but I still need products designated pages-. I'd like to increase the column number to 5 or 6 but couldn't find a way to do so as the max number is 4.  Is there a way to do so? 

Thanks a lot!

Bike

1 hour ago, bikekefeli said:

Hi All!

I'm  using portfolio page with Grid: Simple layout for my client's site. Trying to  basically create something to replace a product page -as we can't start e-commerce now but I still need products designated pages-. I'd like to increase the column number to 5 or 6 but couldn't find a way to do so as the max number is 4.  Is there a way to do so? 

Thanks a lot!

Bike

Kindly share your site with the protected password to check it together

1 hour ago, bangank36 said:

Kindly share your site with the protected password to check it together

https://maracas-butterfly-k7s6.squarespace.com/

password: alpinaluminium2021

I put the portfolio page on the main nav for ease of access for you

Thanks!

18 hours ago, creedon said:

Add the following to Portfolio Settings > Advanced > Page Header Code Injection for the portfolio page.

<style>

  /*
  
    begin portfolio grid columns n
    
    Version     : 0.1d0
    
    SS Version  : 7.1
    
    By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    */
    
    .portfolio-grid-basic {
    
      --columns : 5;
      
      /* do not change anything below, there be the borg here */
    
      grid-template-columns : repeat( var( --columns ), minmax( 0, 1fr ) );
      
      }
      
    /* end portfolio grid columns n */
    
  </style>

Let us know how it goes.

It worked like a charm! Thank you so much!

-Bike

This doesn't seem to be working anymore. I wonder if Squarespace changed their system since October?

Actually I figured it out. instead of 

.portfolio-grid-basic

it needs to be 

.portfolio-grid-overlay

On 10/25/2021 at 6:34 PM, creedon said:

Add the following to Portfolio Settings > Advanced > Page Header Code Injection for the portfolio page.

<style>

  /*
  
    begin portfolio grid columns n
    
    Version     : 0.1d0
    
    SS Version  : 7.1
    
    By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    */
    
    .portfolio-grid-basic {
    
      --columns : 5;
      
      /* do not change anything below, there be the borg here */
    
      grid-template-columns : repeat( var( --columns ), minmax( 0, 1fr ) );
      
      }
      
    /* end portfolio grid columns n */
    
  </style>

Let us know how it goes.

Hi! I'm trying to do this as well but it doesn't seem to be working. I'd like to be able to add up to 10 rows. I'm using the overlay option, so I changed the code per SamBoyle's note above, but still no change. Would someone mind taking a look?  

https://bugle-banjo-apfh.squarespace.com/

password: squarespacehelp

14 hours ago, AndyKhouri said:

I'm trying to do this as well but it doesn't seem to be working.

The reason it isn't working is you installed the code in Design > Custom CSS. The post says to install in Portfolio Settings > Advanced > Page Header Code Injection for the portfolio page.

You can install the code in Design > Custom CSS if you remove the style tag.

On 8/23/2022 at 1:24 PM, creedon said:

The reason it isn't working is you installed the code in Design > Custom CSS. The post says to install in Portfolio Settings > Advanced > Page Header Code Injection for the portfolio page.

You can install the code in Design > Custom CSS if you remove the style tag.

Thank you for this super-fast reply! it worked perfectly. 

Follow-up question, if that's alright; changing this code seems to disable the default mobile view. The default view is you see each portfolio entry stacked as a full-size square. With the code injection, which is present on my demo site now, the squares become tiny thumbnails in rows. Is there a simple way to preserve the default mobile view?

13 hours ago, AndyKhouri said:

disable the default mobile view

I updated my code cited in my October 25, 2021.

I came to this thread just now for the same issue with getting it to work on mobile. Coincidentally @creedonupdated the code yesterday. Just wanted to say thank you!