Jump to content

Increase column number from4 to 5 for portfolio page on 7.1

Go to solution Solved by creedon,

Recommended Posts

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

Edited by bikekefeli
Link to comment
  • bikekefeli changed the title to Increase column number from4 to 5 for portfolio page on 7.1
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

Link to comment
  • 3 months later...
  • 6 months later...
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

 

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 2 weeks later...
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?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.