One column grid for specific portfolio page

Site URL: https://haileychodesign.com/

Hi, I have 1 portfolio page ("Beauty") that has 2 columns. I'm now trying to build another portfolio page that has only 1 column while keeping the existing portfolio page 2 columns. The new page will be called "Others." Please help me to custom code this! Thanks!

Assuming you are using one of the Grid (Overlay or Simple) Layouts for your Others Page, put the following in Design > Custom CSS. If you use a Layout other than one of the grids then this code won't work.

/* 100% (auto) */

/*insert Page collection id here]*/ [class^="portfolio-grid-"] {

  grid-template-columns: auto;
  
  }

Replace /*insert Page collection id here*/ with the collection id for your Others Page.

Do you know how to find the collection id for a Page? If not, let us know and we can help you.

If you don't want the column to take up the whole page following are some variations.

/* 75% */

/*insert Page collection id here]*/ [class^="portfolio-grid-"] {

  grid-template-columns: repeat(8,auto);
  
  }

/*insert Page collection id here]*/ [class^="portfolio-grid-"] .grid-item {

  grid-column: 2 / 8;
  
  }

/* 50% */

/*insert Page collection id here]*/ [class^="portfolio-grid-"] {

  grid-template-columns: repeat(4, auto);
  
  }

/*insert Page collection id here]*/ [class^="portfolio-grid-"] .grid-item {

  grid-column: 2 / 4;
  
  }

If you have the business plan then you can put the CSS in Page Settings > Advanced > PAGE HEADER CODE INJECTION.
 

<style>

  /* 100% (auto) */
  
  [class^="portfolio-grid-"] {
  
    grid-template-columns: auto;
    
    }
    
  </style>

It is basically the same as above just wrapped in a style tag and minus the collection id.

The CSS uses CSS3 substring matching attribute selectors.

Let us know how it goes.

I made some minor tweaks to the CSS. Used CSS3 substring matching attribute selectors to target both the Grid Simple and Overlay Layouts.

I used this code to create  a one-column grid for a client. 

/* 100% (auto) */

/*5fad6b44253fde48501f2902*/ [class^="portfolio-grid-"] {

  grid-template-columns: auto;
  
  }

but now, I can't get the thumbnail images to be full bleed on the left and right. There's a black column. Is there a code I can add on to this?

8 hours ago, nicoledelger said:

I used this code to create  a one-column grid for a client. 

 

/* 100% (auto) */

/*5fad6b44253fde48501f2902*/ [class^="portfolio-grid-"] {

  grid-template-columns: auto;
  
  }

 

but now, I can't get the thumbnail images to be full bleed on the left and right. There's a black column. Is there a code I can add on to this?

 

 

Can you share link to portfolio page? We can check easier

On 11/13/2020 at 5:09 PM, nicoledelger said:

/* 100% (auto) */

/*5fad6b44253fde48501f2902*/ [class^="portfolio-grid-"] {

  grid-template-columns: auto;
  
  }

I didn't notice this way back when it was posted but normally the code would look something like the following. This is just an example and won't work for any site.

/* 100% (auto) */

#collection-5f45b7ef6228fc1bee359e60 [class^="portfolio-grid-"] {

  grid-template-columns: auto;
  
  }

The bits in between /* and */ are comments and so they have no effect and may cause unintended results.

On 9/5/2020 at 4:40 PM, creedon said:

 

Assuming you are using one of the Grid (Overlay or Simple) Layouts for your Others Page, put the following in Design > Custom CSS. If you use a Layout other than one of the grids then this code won't work.

/* 100% (auto) */

/*insert Page collection id here]*/ [class^="portfolio-grid-"] {

  grid-template-columns: auto;
  
  }

Replace /*insert Page collection id here*/ with the collection id for your Others Page.

Do you know how to find the collection id for a Page? If not, let us know and we can help you.

If you don't want the column to take up the whole page following are some variations.

/* 75% */

/*insert Page collection id here]*/ [class^="portfolio-grid-"] {

  grid-template-columns: repeat(8,auto);
  
  }

/*insert Page collection id here]*/ [class^="portfolio-grid-"] .grid-item {

  grid-column: 2 / 8;
  
  }

 

/* 50% */

/*insert Page collection id here]*/ [class^="portfolio-grid-"] {

  grid-template-columns: repeat(4, auto);
  
  }

/*insert Page collection id here]*/ [class^="portfolio-grid-"] .grid-item {

  grid-column: 2 / 4;
  
  }

If you have the business plan then you can put the CSS in Page Settings > Advanced > PAGE HEADER CODE INJECTION.
 

<style>

  /* 100% (auto) */
  
  [class^="portfolio-grid-"] {
  
    grid-template-columns: auto;
    
    }
    
  </style>

It is basically the same as above just wrapped in a style tag and minus the collection id.

The CSS uses CSS3 substring matching attribute selectors.

Let us know how it goes.

Hi Thomas, this code is exactly what I was looking for, thank you! Is there any way to adjust the width of the image images in the column once it is a single column? I'd like to make it more narrow. Thanks for your help

2 hours ago, bryanb11 said:

Is there any way to adjust the width of the image images in the column once it is a single column? I'd like to make it more narrow.

Please post the URL to the page where you are trying to achieve this effect.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

On 1/6/2021 at 2:28 PM, creedon said:

Please post the URL to the page where you are trying to achieve this effect.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

 Thanks! This is the site. https://www.bryanbarnes.me/

What I am trying to achieve is a single column grid instead of the two column. Also, I am trying to control the width of the images once they are in a single column. When I tried it before, the width was too large and didn't look great. Thanks for your help! 

2 hours ago, bryanb11 said:

What I am trying to achieve is a single column grid instead of the two column.

This is pretty easily done.

2 hours ago, bryanb11 said:

Also, I am trying to control the width of the images once they are in a single column. When I tried it before, the width was too large and didn't look great.

This can be done by playing with several parameters. The size of the image itself and/or the margins/padding around the images. Here I try the padding.

Add the following to Design > Custom CSS.

#collection-5fd3ef13c11a957e7ef68e4d .portfolio-grid-overlay {

  -ms-grid-columns: auto;
  grid-template-columns: auto;
  grid-column-gap: unset;
  
  }

@media only screen and ( pointer: coarse ) and ( min-width: 1025px ), screen and ( min-width: 800px ) {

  #collection-5fd3ef13c11a957e7ef68e4d.tweak-portfolio-grid-overlay-width-inset .portfolio-grid-overlay {
  
    padding-left: 25vw;
    padding-right: 25vw;
    
    }
  }

Let us know how it goes.

55 minutes ago, creedon said:

This is pretty easily done.

This can be done by playing with several parameters. The size of the image itself and/or the margins/padding around the images. Here I try the padding.

Add the following to Design > Custom CSS.

#collection-5fd3ef13c11a957e7ef68e4d .portfolio-grid-overlay {

  -ms-grid-columns: auto;
  grid-template-columns: auto;
  grid-column-gap: unset;
  
  }

@media only screen and ( pointer: coarse ) and ( min-width: 1025px ), screen and ( min-width: 800px ) {

  #collection-5fd3ef13c11a957e7ef68e4d.tweak-portfolio-grid-overlay-width-inset .portfolio-grid-overlay {
  
    padding-left: 25vw;
    padding-right: 25vw;
    
    }
  }

Let us know how it goes.

Thomas! Your'e amazing, thank you for this! Works perfectly 

On 9/6/2020 at 8:40 AM, creedon said:

 

<style>

  /* 100% (auto) */
  
  [class^="portfolio-grid-"] {
  
    grid-template-columns: auto;
    
    }
    
  </style>

 

Legend!!! thank you!!!

This is great — quick question, now that it is in a single column, I want it to be full page, no border/padding. However, I want to achieve this without adjusting the overall site padding. https://lonesprucetestsite.squarespace.com/

2 hours ago, LoneSpruce said:

This is great — quick question, now that it is in a single column, I want it to be full page, no border/padding. However, I want to achieve this without adjusting the overall site padding. https://lonesprucetestsite.squarespace.com/

Add to Design > Custom CSS

div#gridThumbs {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

Hello! Could you help me with my case? I have 2 columns in portfolio pages but I would like to have 3 columns on one specific portfolio page. How can I make it happen?

https://www.michalsieradzan.com/

I would like to have 3 columns in here - https://www.michalsieradzan.com/szp

@kasiakalasia

Please see the following.

Let us know how it goes.

Hello @creedon! Thank you for your answer.  Unfortunately, I do not have the Business plan and cannot add page header code. However, I pasted the code in a text section and it works. Thank you 🙂

9 hours ago, kasiakalasia said:

However, I pasted the code in a text section and it works.

That works too! 🙂

On 11/25/2020 at 5:31 AM, creedon said:

/* 100% (auto) */

#collection-5f45b7ef6228fc1bee359e60 [class^="portfolio-grid-"] {

  grid-template-columns: auto;
  
  }

Hello! 

I'm trying to change my portfolio page to a one-column grid.

I used the code above, and upon refreshing the page, it switches to one-column for one second then jumps back to two-columns. 

How can I fix it?

Many thanks!

On 11/24/2022 at 9:24 AM, holadaisy said:

I used the code above, and upon refreshing the page, it switches to one-column for one second then jumps back to two-columns.

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.