Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

One column grid for specific portfolio page


hailsc

Question

  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular 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

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.

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

11 answers to this question

Recommended Posts

  • 1

 

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 best , and see my profile. Thanks for your support!

Link to post
  • 0

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 post
  • 0
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

Link to post
  • 0
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 best , and see my profile. Thanks for your support!

Link to post
  • 0
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 post
  • 0
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 best , and see my profile. Thanks for your support!

Link to post
  • 0
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 post
  • 0
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 best , and see my profile. Thanks for your support!

Link to post
  • 0
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 post

Create an account or sign in to comment

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


×
×
  • Create New...