Adjusting the grid distance in front page

  • Author
    Posts
  • #130103

    I would like to change the distance of the grid page in the front page section, how would I do that?

    The blog I need help with is 1carepartylist.com.

    #130112

    tarasdashkevych
    Theme Author

    Hello,

    You can use this custom CSS to increase a distance between grid items on the Front Page template:

    
    @media only screen and (min-width: 992px) {
      .front-block .grid-row .grid-item {
          padding-right: 40px;
          padding-left: 40px;
      }
    }
    

    Hope this helps.

    Best,
    Taras

    #130117

    Hi, another question, how would I adjust the grid of my first featured page on the front page without affecting the next featured paged below?

    #130136

    tarasdashkevych
    Theme Author

    To adjust the grid in the first featured page, please use this custom CSS:

    
    @media only screen and (min-width: 992px) {
      .front-block.featured-page-199 .grid-row .grid-item {
          padding-right: 40px;
          padding-left: 40px;
      }
    }
    

    Where 199 is the ID of the parent page (featured page).

    Hope this helps.

    Thank you,
    Taras

    #130264

    Hey, Taras! I would like to know how I could change the grid column number on my first featured page without affecting the next page? (front page)

    #130265

    and how do I expand my grid to, at least, cover the whole page?

    #130305

    tarasdashkevych
    Theme Author

    Hello,

    “I would like to know how I could change the grid column number on my first featured page without affecting the next page?”
    – By “column number”, do you mean the order of your grid items? If yes, then you can change the order using the Order option in the Page Attributes module: https://en.support.wordpress.com/pages/page-options/#order

    Please note, this order till apply to both Front Page and Grid Page. Unfortunately, it’s not possible to change the order of the grid items on the Front Page.

    “how do I expand my grid to, at least, cover the whole page?”
    – You can remove side paddings to cover almost the whole page. For example:

    
    .front-block.featured-page-199 .container {
    	max-width: 100%;
    	padding-right: 1.25rem;
    	padding-left: 1.25rem;
    }
    

    The reason why you see some space on both sides (left and right) is because of the spacing between grid items.

    Hope this helps.

    Thanks,
    Taras

    #130337

    tarasdashkevych
    Theme Author

    Note, please do not remove left and right paddings. Otherwise, there will be an overflow issue (scroll bar at the bottom) on your site.

    Best,
    Taras

The topic ‘Adjusting the grid distance in front page’ is closed to new replies.