[Resolved] Category and Tags Archive Issue

[Rohan Verma]

Hello. There are a few category and tag related issues.

1. Category and Tag archive results aren’t showing the author, date, meta tags in streamlined. Even on mobile view it look worse. How to fix that?

2. For mobile version, I want to set author and date display on the same lineup like category & tag. They are showing zigzag wise currently.

3. For mobile version, category box is showing with the comma. How can I remove the box only from archive pages?

4. For mobile version, archive pages showing article title too close with the thumbnail. How create a proper padding between them?

[Tom]

Hi there,

1. Not too sure what you mean by streamlined – do you have any examples?

2. Right now I’m seeing everything inline – nothing zig-zagged. Do you have a screenshot so I can see?

3. Did you resolve this? I’m not seeing boxes on the archives.

4. You have this CSS:

@media (max-width: 768px) {
    .wp-show-posts-image.wpsp-image-left {
        float: left;
        margin-right: 0.8em;
        max-width: 130px;
    }
}

Simply increase the margin-right to increase the spacing.

[Rohan Verma]

Check this screenshot. https://prnt.sc/u0irzw

1. None of the desktop and mobile view showing properly aligned meta info. I want author+date info to be displayed where category and tag meta placed. This is what I mean on the same lineup.

2. Category meta is showing inside box in archive pages. I want to remove that.

3. I have tried to set margin-right from 0.8em to 1em. Still the mobile version showing article title too close with the thumbnail in archive.

[Tom]

Ah, sorry. I was looking at your home page.

Give this CSS a shot:

.archive .inside-article {
    display: grid;
    grid-template-areas:
        "image content"
        "image footer-meta";
}

.archive .post-image {
    grid-area: image;
}

.archive .entry-header {
    grid-area: content;
}

.archive footer.entry-meta {
    grid-area: footer-meta;
}

.archive .cat-links a {
    border: 0;
}

@media (max-width: 768px) {
    body:not(.post-image-aligned-center) .inside-article .post-image {
        margin-right: 2em;
    }
}

Let me know 🙂

[Rohan Verma]

A big Thank you. Perfect now.

[Tom]

You’re welcome 🙂

[Author]

Posts