Archived topic

Archives page styling

5 replies · Started by Eric on February 19, 2021

Viewing posts 1–6 of 6

February 19, 2021 at 1:52 pm #1665009

Hi there,

I'm trying to style my archive pages and can't seem to figure out the correct CSS.

I'd like the layout to look like the attached image where the image is flush and there is no padding above or below the image and then get the rest of the metadata and text are spaced evenly and centered within the horizontal card while keeping the text aligned left.

Can I get some help with this?

Thanks!

February 19, 2021 at 2:58 pm #1665048

Hi Eric,

With your current structure, it's very difficult to achieve what you are looking for for now.

Good news is, with the new feature of GPP 2.0 Alpha which will be released in next week, it will be very easy to achieve especially if you are gonna use our block editor plugin Generateblocks.

Here's a demo video freshly made for the new feature of GPP 2.0.
https://www.youtube.com/watch?v=-ZTQP_KA2xE&ab_channel=GeneratePress

If you are not in hurry, I would definitely recommend to wait :)

February 19, 2021 at 3:47 pm #1665072

Hi Ying,

Thanks for the quick response. I was hoping it was as easy as removing some padding or margin from around the featured images since I saw that is a simple check box option on the vertical blog card layout, just not on the horizontal card layout... darn.

Well, that is good news about GPP 2.0, looks like some nice new features! Thanks for sharing the demo.

Looking forward to the release :)

In the meantime, is there an easier way I can match the layout on my live site (link provided in private comments)? It's similar but different as it has a 20px padding around the edges.

The reason I'm making these changes is to get away from Elementor powering my entire site layout and design.

Thanks again

February 19, 2021 at 4:23 pm #1665091

Yea..
For the vertical layout we only need to deal with X direction, but for horizontal layout both X and Y directions need to be taken care of. You could use this CSS for now :)

/*For colors*/
span.entry-meta.cat-links a {
    color: #c8a99b;
}
span.entry-meta.cat-links a:hover {
    color: rgba(200,169,155,0.58);
}
/*For layout*/
.post-image-above-header .inside-article .post-image {
    margin-bottom: 0;
}

July 12, 2021 at 5:14 am #1852661

Hi Ying, sorry never closing this, thanks for your support.

July 12, 2021 at 9:36 am #1853124

No problem :)

Glad to be helpful!

This archived topic is closed to new replies.

Start building better websites today.