[Resolved] custom design like this

[Rajkumar]

I want a custom design like this.

https://www.gulshankumar.net/

I tried a three-grid design. But not able to achieve this.

My site design: https://prnt.sc/rPxh9SMVY_pe

[Leo]

Hi there,

Any chance you can link us to the page in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[Rajkumar]

Private information has been added; kindly check; I need a design like the mentioned website. Only the homepage and archive page.

[Leo]

Try the following steps:

1. Set the Featured image location to Above title for Archives:
https://docs.generatepress.com/article/adjusting-the-featured-images/

2. Deactivate/uncheck the Display padding around images option:
https://docs.generatepress.com/article/adjusting-the-featured-images/

3. Remove all Post meta including date, author, categories and comments:
https://docs.generatepress.com/article/blog-content-layout/#archives

Let me know when the 3 steps are done and I’ll provide the CSS 🙂

[Rajkumar]

kindly provide me the css sir . i will do the rest and will update you.🙂

[Leo]

Please complete the steps above so I can inspect the page again and provide the best CSS possible.

Thanks!

[Rajkumar]

done kindly check and update sir.

[Fernando]

Hi Rajkumar,

Can you try this CSS?:

:is(.blog,.archive) .post-image img {
    width:  100%;
    height: auto;
}

:is(.blog,.archive) .post-image {
    margin-bottom: 0 !important;
}

:is(.blog,.archive) article .inside-article {
    box-shadow: 0 7px 20px 0 rgb(38 50 56 / 8%);
    border-radius: 10px;
    overflow: hidden;
}

:is(.blog,.archive) article .inside-article h2 a {
    font-weight: 700;
    font-size: 17px!important;
    
}   

:is(.blog,.archive)  :is(.entry-summary, .entry-meta) {
    display: none;
}

[Rajkumar]

Working fine; I need to add a margin on the right and left for a mobile device.

Thank you so much for your help.

[Fernando]

Can you try adding this as well?:

@media (max-width: 768px){
    :is(.blog,.archive) article .inside-article {
    margin-left: 24px;
    margin-right: 24px;
}
}

[Author]

Posts