[Support request] Blog Template

[Sam]

Hi Gents,

I would like to turn one of my Blog Category Archive pages into this format, including the line.

https://neilpatel.com/blog/

Any idea how I can do that?

Thank you!

Note: I currently have one archive page with Masonry, and one with the standard WordPress archive page, so I have to make sure that the code for this page does not conflict with that layout.

Thank you so much!

[David]

Hi there,

so this should get you started:

@media (min-width: 768px) {
    .archive.category-SLUG  .post {
        width: 40%;
    }
    .archive.category-SLUG  .hentry:nth-of-type(odd) {
        margin-right: 60%;
    }
    .archive.category-SLUG  .hentry:nth-of-type(even) {
        margin-left: 60%;
        margin-top: -200px; /* vertical offset right hand column */
    }
    .archive.category-SLUG  .site-main {
        position: relative;
    }
    .archive.category-SLUG  .site-main:after {
        content: '';
        display: block;
        width: 1px;
        height: 100%;
        background: #000; /* center rule color */
        position: absolute;
        top: 0;
        left: 50%;
        right: inherit;
        margin-left: -.5px;
    }
}

You need to add your category slug in .archive.category-SLUG

If it clashes with the current customiser settings then we will need to use some options filters to change those setting for that archive.

[Sam]

Hi David,

I applied your code not to the media queries one, but the normal code for desktop…

My question is:

1. How can I remove the line in the middle, and then get the posts to stack on top of one another in 768px and below?

Thank you so much!

[David]

Have you tried adding the code within the 768px media query as above?
Then we just need to deal with how they stack. Let me know.

[Sam]

Hi David,

Just added the code into 768px, and now it’s not displaying on Desktop;

https://drive.google.com/file/d/1Bnfx4FVo_ULjUE0cZ2KXCTVlS8r1vPUP/view?usp=sharing

[David]

Hi there,

did you remove the other code?
Their is either some other CSS overruling it or there is an error in your CSS stack. You can use this tool to check:

http://www.css-validator.org

[Sam]

Hi David, by other code, do you mean you have to place the same code in both Desktop CSS and 768?

[David]

It only requires the code above. It will then only apply on devices 768px and greater.

[Sam]

Ah, my mistake. I placed it in MAX width, not min-width.

May I know how do I reduce the space between the posts and the central line, please?

https://drive.google.com/file/d/1mYQk52S6CS1mRCvzqVOGto2_cB4-7__z/view?usp=sharing

[David]

You could adjust the widths of the articles and the margins
E.g Width: 40% —> 45% Margin: 60% —> 55%

[Sam]

Thank you very much, David!

[David]

You’re welcome 🙂

[Author]

Posts