Jump to content

One column grid for specific portfolio page

Recommended Posts

 

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.

Edited by creedon
version 2, use matching substring selectors other minor tweaks

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 months later...

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?

 

 

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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
  • 1 month later...
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

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

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
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! 

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

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
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 

Link to comment
  • 2 weeks later...
  • 4 months later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 7 months later...
  • 10 months later...
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!

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

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

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.