Site logo

Archived topic

Vertical divider line for blog and single post page

3 replies · Started by Dev on May 12, 2021

Viewing posts 1–4 of 4

Hello,

Please check the screenshot link.

https://ibb.co/wBRZCYg

I want to display a vertical divider line as u saw in the screenshot. I search and found the below CSS code. But I think this code is only for single post pages. I want to display that vertical line on the blog page also.

@media(min-width:769px){
body.single-post .inside-article {
border-right: 2px solid red;
}
}

Hi there,

not sure without seeing the site, but you can try this:

@media(min-width: 769px) {
    .right-sidebar #main {
        position: relative;
    }
    .right-sidebar #main:after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: -15px; /* offset rule between separateing space */
        width: 2px; /* border thickness */
        background-color: #f00; /* border color */
    }
}

It will add a vertical rule ( the height of the main content ) in between the main content and the right sidebar.

Thanks, it worked.

:)

Glad to hear that

This archived topic is closed to new replies.