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

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!

Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

2 answers to this question

Recommended Posts

  • 0

 

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

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

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

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

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