[Resolved] Vertical line and footer widget alignment

Home Forums Support [Resolved] Vertical line and footer widget alignment

Home Forums Support Vertical line and footer widget alignment

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #951087
    bradborland

    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!

    #951251
    David
    Staff
    Customer Support

    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.

    #951396
    bradborland

    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?

    #951411
    Leo
    Staff
    Customer Support

    Looks like you’ve already done it?

    I see a line between each widget in the right sidebar already ๐Ÿ™‚

    #951419
    bradborland

    Hi Leo,

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

    #951429
    Leo
    Staff
    Customer Support

    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

    #951434
    bradborland

    Thanks so much!

    #951436
    Leo
    Staff
    Customer Support

    No problem ๐Ÿ™‚

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.