[Resolved] Archives page styling

Home Forums Support [Resolved] Archives page styling

Home Forums Support Archives page styling

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1665009
    Eric

    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!

    #1665048
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1665072
    Eric

    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

    #1665091
    Ying
    Staff
    Customer Support

    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;
    }
    #1852661
    Eric

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

    #1853124
    Ying
    Staff
    Customer Support

    No problem πŸ™‚

    Glad to be helpful!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.