Center Sidebar on Mobile and add border line between widgets

Support
#1

Hi There!

I have a few questions about the sidebar/widget bar I’m hoping someone can help me with…

  1. How can I center-align the sidebar and all of it’s content on MOBILE?

2.How can I add a thin border line/divider in between (above/below) the individual widgets in the sidebar?

  1. How can I adjust the top margin of the whole sidebar? It is too far from the top of the page.
#2

Hello @SeekGod,

Thanks for writing in!

1.) & 2.)
To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

aside.x-sidebar.left {}

@media(max-width: 767px){
    .x-sidebar .widget,
    .x-colophon .widget {
        text-align: center;
    }

    .x-sidebar .widget,
    .x-colophon .widget {
        border-bottom: solid 1px #333;
        padding-bottom: 30px;
    }

    .x-sidebar .widget:last-child,
    .x-colophon .widget:last-child {
        padding-bottom: 0;
        border: none;
    }
}

If you want to adjust the top margin of the whole sidebar in desktop screens and in smaller screens, you can add this css code:

.x-sidebar {
  margin-top: 20px;
}

Feel free to change the values as needed.

#3

This all worked perfectly! Thanks @RueNel!!

#4

Hi @RueNel, actually there is one issue. #2 above also added border lines between the widgets in my footer.

Is there a way to exclude the Footer from this?

Thank you.

#5

Hey @SeekGod,

To do that, please update this block of code:

    .x-sidebar .widget,
    .x-colophon .widget {
        border-bottom: solid 1px #333;
        padding-bottom: 30px;
    }

to

    .x-sidebar .widget {
        border-bottom: solid 1px #333;
        padding-bottom: 30px;
    }

Hope this helps.

#6

Perfect once again! Thank you guys

#7

We are delighted to assist you with this.

Cheers!

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.