Archived topic
Vertical divider line for blog and single post page
3 replies · Started by Dev on May 12, 2021
Hello,
Please check the screenshot link.
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