Ethos move my sidebar down, add space above sidebar

Support
#1

Hello all!
I am looking to move my sidebar down a bit so that it will be on the same level as the rest of my content on the left. The sidebar is located on the homepage. Specifically, I would like the sidebar to match up with the block quote to its left.

This is my website: https://www.the-second-sunrise.com/

I have tried adding custom CSS from two previously-answered questions without any success.

Any tips would be appreciated!
J.

I have tried:
.single-post .x-sidebar.right {
margin-top: 312px;
}

And:
.x-sidebar {
margin-top: 60px;
}

#2

Hi There,

Please try with this CSS instead:

.x-sidebar {
    margin-top: 60px !important;
}
.single-post .x-sidebar.right {
margin-top: 312px !important;
}
#3

@Thai, thank you so much for your assistance!
The code worked and you can see how it has changed my homepage the-second-sunrise.com

Would you be able to help me move both the page content (on the left) and the righthand sidebar up so they are closer to the header?

I would like to shrink the gap between the header and the page content.

Thank you!
J.

#4

Hello There,

Thanks for updating in! To make the gap of the content and sidebar a bit closer, you can make use of this code:

body .x-main.left {
    padding-right: 10px;
}

body .x-sidebar.right {
    padding-left: 10px;
}

The previous padding is 35px which is 70 pixels in total. Feel free to adjust the code update to 5 pixels if needed.

Please let us know how it goes.

#5

Thank you @RueNel
The code you wrote alters the width of the columns but I am looking to move the .x-main.left section up.

I am able to move my right sidebar up and down as I wish using the code:

.x-sidebar {
margin-top: 2px !important;
}

I have tried modifying that code to move the .x-main.left column up. I have tried creating the code:
.x-main.left{
margin-top: 2px !important;
}

as well as

.x-main.left{
padding-top: 2px !important;
}

This code works because I can use it to move the left column down farther, however I cannot move the left column UP any higher than it currently is on my site.

Any ideas? I hope this all makes sense. Again my url is www.the-second.sunrise.com

Thank you,
J

#6

Hi there,

You can use positioning instead of margin, like this

.x-main.left{
position: relative;
top: -12px !important;
}

Hope this helps.

#7

Thank you @Rad it looks perfect!

#8

Glad we could help.

Cheers!

1 Like