Reduce width of sidebar

[hyperdrive_boom]

Good afternoon,

I have a sidebar that is displayed on every page to show adverts. However I would like to reduce this size down to be the same as the gap between the featured image and the line - as indicated in the orange block :

How can this be achieved?

Thank you!
Jason

[Prasant]

Hello @hyperdrive_boom,

Thanks for writing in!

Please add following CSS under X/Pro > Theme Options > CSS:

.x-sidebar.right {
    padding-left: 0;
}

In case above code does not work, please share website URL for us to take a closer look.

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[hyperdrive_boom]

Good morning and thank you for this!

I have inserted this and nothing happened. I changed padding to width % and that makes the widgets smaller but not the sidebar:

Oh sorry I forgot to add the login details - they are in the secure note now

Kind Regards,
Jason

[jade]

Hey Jason,

Your sidebar width is set to 7.79803%, you can also increase the width of the main content area so that it will get pushed closer to the sidebar content.

Please try this code in the Global CSS:

.x-content-sidebar-active #x-site .x-main {
    width: 90%;
}

.x-content-sidebar-active #x-site .x-sidebar {
    width: 7%;
}

Feel free to change the width values in the code.

Hope this helps.

[hyperdrive_boom]

That is perfect!

Thank you!

[jade]

You’re welcome, Jason.