Docs

[erikawells]

Hello!

A while back, you guys were able to help me add CSS code to create a border along the edge of my sidebar. I’ve changed a little bit of my idea of how I’d like it to look, and I could use some more help!

I’d really like for the border to extend up to the menu and down the the footer border, so that it looks as if the sidebar is a separate boxed element.

Similar to this image:

The code I’ve used to create the border is as follows:

@media (min-width:768px){
  .x-sidebar.right {
    border-left: 10px solid #E7E6E8;
  }

Could you help me out? Thanks!

[erikawells]

This reply has been marked as private.

[Jade]

Hi Erika,

My apologies but I am not certain what you are trying to do based on what you have described. Do you want the sidebar to be shifted a bit to the top that a part of it overlays the header?

[erikawells]

Hi Jade!

Sorry, I’m having a hard time describing it. I would like the gray sidebar border to go all the way up to the gray primary menu, so that there is no white in between. Also the same on the bottom: I’d like the sidebar border to meet the border I have in the footer.

I took screenshots and photoshopped them to illustrate the style I’m hoping to achieve. Does that help?

[erikawells]

Here’s the other screenshot, it didn’t upload properly the first time.

[Joao]

Hi There,

Please add the following code to Appereance > Customizer Custom > CSS

.blog .x-container.width {

    margin: 0;
}
.right {
 
    padding-top: 30px;
}

Hope it helps

Joao

[erikawells]

That worked well for what I was hoping to achieve, and after adjusting my margins and padding the sidebar looks great! Unfortunately, now the blog content is off center, as is my header and footer. Any ideas what to do about that?

[Jade]

Hi Erika,

Please update

.blog .x-container.width {
    margin: 0;
}

to

.blog .x-container.width.offset {
    margin: 0;
}

It should fix the alignment issue.

Hope this helps.

[erikawells]

Thank you, that did address the problem with the header and footer being off center, but the blog content is still off.

[Thai]

Hi There,

Please update the previous CSS a bit:

.blog .x-container.width.offset,
.single-post .x-container.width.offset {
    margin: 0;
}

Hope it helps 🙂

[erikawells]

Bummer, still not working yet! I can bump up the margin or padding on the left side to give it more space over there, but nothing I’m trying is effecting the huge amount of space on the right side of the text. It’s on both the blog page feed, and each individual post page.

[erikawells]

I think I fixed it (or at least patched it) by adding this code to the end of what you gave me:

.left {
  padding-top: 8%;
  padding-left: 10%;
  padding-bottom: 8%;
  width: 84% !important;
}

I may play around with the percentages, but does that look like it is going to work out?

[Lely]

Hello There,

I can see that is is ok now on your blog index page. On blog single pages, it is off because by default Section has container. We have to disable this container. Edit your single post content in Cornerstone, click section and Inspect Row > Set Column Container to OFF.This will give you same spacing on with your blog index page.

[erikawells]

Perfect! Thank you guys so much, your support is the best!

[Joao]

Glad to hear we managed to help,

Joao

[Author]

Posts