Archived topic

Vertical line and footer widget alignment

7 replies · Started by bradborland on July 7, 2019

Viewing posts 1–8 of 8

July 7, 2019 at 7:07 am #951087

1. How do I create a vertical line separating the left side (content/posts) from the right sidebar (widgets)?

2. A footer widget (custom HTML) won't line up correctly on the right side. This is mainly seen on mobile view. All padding is set up correctly and symmetrically. I don't know how to fix this. Does same vs. separate containers in "layout" make a difference?

Thanks!

July 7, 2019 at 8:12 am #951251

Hi there,

this CSS will place a border between the main and rightside bar container.

@media (min-width: 769px) {
    .separate-containers .site-main {
        border-right: 1px solid #ccc;
    }
}

For the footer can you check in Customizer > Layout > Footer in Mobile responsive view. Looks like you have zero right padding.

July 7, 2019 at 11:25 am #951396

Hi David,

Thanks so much! Love it! You're the man!

Okay, one last question: Is there a CSS code for putting a similar lined box around each widget in the right sidebar? Maybe with a 3d shadow box option?

July 7, 2019 at 11:35 am #951411

Looks like you've already done it?

I see a line between each widget in the right sidebar already :)

July 7, 2019 at 11:45 am #951419

Hi Leo,

I was looking to add a square box around each widget. Maybe a 3d shadow effect...

July 7, 2019 at 11:57 am #951429

That case simply modify this existing CSS:

.sidebar .widget {
    border-bottom: 1px solid #7777;
}

To something like this:

.sidebar .widget {
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

Reference: https://www.cssmatic.com/box-shadow

July 7, 2019 at 12:04 pm #951434

Thanks so much!

July 7, 2019 at 12:05 pm #951436

No problem :)

This archived topic is closed to new replies.

Start building better websites today.