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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • Solution

Please see portfolio grid columns n. Add the code to Portfolio Settings > Advanced > Page Header Code Injection for the portfolio page.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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
  • 1 year later...
6 hours ago, InnateStudio said:

I'm trying to use this to make 5 columns and can't seem to make it work. Would you mind taking a look? innate-studio.com.

I don't see the code installed in your Portfolio page per the instructions. When I installed it locally it works.

ScreenShot2024-01-10at11_25_03PM.thumb.png.10c550d209e4c286163792a883d15e22.png

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 3 weeks later...

Here is the code if anyone needs mobile & tablet too. Edit the numbers as needed. 

Pages → Website tools → Code Injection (globally)

Page settings → Advanced → Page header code injection (for a single page)

<style>
/* edit */
:root {
	 --portfolio-columns: 6;
	 --portfolio-columns-tablet: 3;
	 --portfolio-columns-mobile: 2;
}
/* stop editing */

 @media (max-width: 767px) {
	 .portfolio-grid-basic, .portfolio-grid-overlay {
		 grid-template-columns: repeat(var(--portfolio-columns-mobile),minmax(0,1fr)) !important;
	}
}
 @media (min-width: 767px) and (max-width: 1023px) {
	 .portfolio-grid-basic, .portfolio-grid-overlay {
		 grid-template-columns: repeat(var(--portfolio-columns-tablet),minmax(0,1fr)) !important;
	}
}
 @media (min-width: 1023px) {
	 .portfolio-grid-basic, .portfolio-grid-overlay {
		 grid-template-columns: repeat(var(--portfolio-columns),minmax(0,1fr)) !important;
	}
}
 </style>

 

Custom CSS (globally):

/* edit here */
:root {
  --portfolio-columns: 6;
  --portfolio-columns-tablet: 3;
  --portfolio-columns-mobile: 2;
}
/* stop editing */

.portfolio-grid-basic,
.portfolio-grid-overlay {
  @media (max-width: 767px) {
    grid-template-columns: ~"repeat(var(--portfolio-columns-mobile),minmax(0,1fr))" !important;
  }
  
   @media (min-width: 767px) and (max-width: 1023px) {
     grid-template-columns: ~"repeat(var(--portfolio-columns-tablet),minmax(0,1fr))" !important;
  }
  
  @media (min-width: 1023px) {
      grid-template-columns: ~"repeat(var(--portfolio-columns),minmax(0,1fr))" !important;
  }
}

 

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.