Make padding between sidebar and sidebar item smaller

Support
#1

Hi there,

I have two varieties of sidebars at the moment - this type https://thelanguagesherpa.com and this type https://thelanguagesherpa.com/russian-guide/

Both of them have square ads at the tops of the sidebar, but I noticed that there is quite a lot of space in between them and the sides of the sidebar.

Do you know how I can make it so that there is only about 5px of padding between the ads and the edge of the sidebars?

Thank you!
LS

#2

Hello @riugn557,

Thanks for writing in! :slight_smile:

Yes, kindly add this code to Pro > Theme Options > CSS:

@media (min-width: 1200px) {
     .x-sidebar .max.width {
         padding-left: 5px !important;
         padding-right: 5px !important;
      } 
}
.x-sidebar .widget {
    margin-top: 5px !important;
}

You can change the spacings by changing the values of the paddings/margins on the code above. E.g. margin-top: 5% !important;

By the way, I suggest you use 5% padding as 5px is too small.

Hope this helps.

#3

Hi Jumar, that’s great thank you.

Just a couple of small things:

  1. For some reason there is a larger gap between the top of the Italki ad and top of the sidebar, than there is the top of the RussianPod101 ad and the top of the sidebar. Do you know how I can make the Italki gap the same size as the RussianPod101 one?

  2. There is now no space between the ads, the search bar, and the ‘Resource Guides’ text. Do you know how I can make about 20px of space between each item?

Thank you!

LS

#4

Hello @riugn557,

Thanks for updating the thread. :slight_smile:

I can see <br> tag on https://thelanguagesherpa.com/ sidebar. Please see screenshot. https://cl.ly/1S0M0X3h1q1Q

Kindly delete any empty spaces or the <br> element and that should automatically fix the spacing issue. Here is a screencast that you can take a look. https://cl.ly/45253X2j2k3g

I see that you have added a custom CSS code that removes the spacing between widget items. Please see screenshot. https://cl.ly/042q233u1m21

I suggest you to please change the values to 20px and that will automatically add spacing in between widget items.

Thanks.

#5

Hi Prasant,

Thank you so much for your help!

#6

You are most welcome. :slight_smile:

#7

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