Archived topic
custom design like this
9 replies · Started by Rajkumar on March 11, 2023
I want a custom design like this.
I tried a three-grid design. But not able to achieve this.
My site design: https://prnt.sc/rPxh9SMVY_pe
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 :)
Private information has been added; kindly check; I need a design like the mentioned website. Only the homepage and archive page.
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 :)
kindly provide me the css sir . i will do the rest and will update you.🙂
Please complete the steps above so I can inspect the page again and provide the best CSS possible.
Thanks!
done kindly check and update sir.
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;
}
Working fine; I need to add a margin on the right and left for a mobile device.
Thank you so much for your help.
Can you try adding this as well?:
@media (max-width: 768px){
:is(.blog,.archive) article .inside-article {
margin-left: 24px;
margin-right: 24px;
}
}