Grid Page 4 columns

  • Author
    Posts
  • #148711

    Hi Taras,

    I tried using this code from another topic but when I paste it into my css it doesn’t reflect changes. Can you advise?
    Can I use apply the same to the post page for my blog?

    .page-template-grid-page .grid-row .three-columns:nth-of-type(3n+1) {
    clear: none;
    }

    .page-template-grid-page .grid-row .three-columns:nth-of-type(4n+1) {
    clear: left;
    }

    @media only screen and (min-width:992px) {
    .page-template-grid-page .grid-row .three-columns {
    width: 25%;
    }
    }

    My website should be public now.

    The blog I need help with is hcsafrika.wordpress.com.

    #148725

    tarasdashkevych
    Theme Author

    Hello,

    “I tried using this code from another topic but when I paste it into my css it doesn’t reflect changes. Can you advise?”
    – Please use this custom CSS:

    
    @media (min-width: 992px) {
     .page-template-grid-page .th-grid-row > * {
       width: 25%;
     } 
    }
    

    Also, could you please post a link to that post where you find a custom CSS, so I can update it as well?

    “Can I use apply the same to the post page for my blog?”
    – Posts page is not designed to display a grid layout. You can try this custom CSS but it might cause some styling issues:

    
    @media only screen and (min-width: 768px){
    .blog .site-content .site-main,
    .archive .site-content .site-main {
      max-width: 100%;
      display: flex;
      flex-flow: wrap row;
      margin: 0 -15px;
    }
    
    .blog .site-content .site-main article,
    .archive .site-content article {
      width: 50%;
      padding: 0 15px;
    }  
    }
    

    Thank you,
    Taras

    #148732

    Hi Taras,

    The code you gave works well for the grid template but it’s not reflecting on the featured page.

    This is the link for post: https://premium-themes.forums.wordpress.com/topic/grid-page-4-columns-linkedin-individual-buttons/

    #148755

    tarasdashkevych
    Theme Author

    Thank you for the link!

    “The code you gave works well for the grid template but it’s not reflecting on the featured page.”
    – If you want to transform a three columns layout into a four columns across the site, please use this custom CSS:

    
    @media (min-width: 992px) {
     .th-grid-3 > * {
      width: 25%;
     } 
    }
    

    Let me know if you have any additional questions.

    Thank you,
    Taras

    #148775

    Perfect! Thank you!

    #148786

    tarasdashkevych
    Theme Author

    Not a problem! :)

The topic ‘Grid Page 4 columns’ is closed to new replies.