How do I change the CSS on the sidebar in this example

[Peter_Fae]

Hey. I’m wanting a clean look for the sidebar and am unsure how to make this happen.

here’s the example --> https://intothemythica.com/places-crestone/

what I’d like it for the color I’ve chosen to be flush with the left side of the page and on top, just basically cleaner.

a second use-example would be this -->

Events

I just want it cleaner, visually. like, why is the sidebar (which I’ve colored a kind of grey for now) on the example just above cutting off the image and not stretched to the left side of the page? how to fix?

Also, within this, what’s the code to change the color of the text in the sidebar?

RECENT UPDATE - it’s not showing on Safari. Only on Chrome
than you!

[nabeel]

Hi Peter,

Thank you for reaching out to us. For the posts pages you can add the following code in the Theme Options > CSS to fix the issue:

.single-post .x-container.max.width.main {
    max-width: 100%;
    width: 100%;
}
.x-container>.offset {
    margin: 0 auto;;
}
.single-post .x-main.right {
    padding-right: 35px;
}

• For the second example, you can simply select Blank - No Container | Header, Footer page template under Page Settings > General in Cornerstone (see screenshot)

Hope this helps!

[Peter_Fae]

That was so helpful! Thank you so much!

A question though - How to change the color of the text in the sidebar?

Also, what is the significance of changing the cornerstone template? WOuldn’t this erase the sidebar all across the pages?

What I’d like is for the sidebar to match the color of the header (a green kinda thing) and be flush on the page, and then be able to see the text on the sidebar in black rather than white.

Also, it’s not quite doing it on this page --> https://intothemythica.com/events-calendar/

So I’m still a bit confused but feel we’re moving towards a solution.

So …

#1 - how to change the text color with CSS on the sidebar
#2 - how to arrange the content in the sidebar so there’s a bit more space inside of it and it doesn’t feel so tight
#3 - how to get the color to render properly on both Chrome & Safari? (it’s not fully showing on Safari)

Thx!

[paul.r]

Hi Peter,

Changing the template to No Container will make your sidebar flush on the page.

For 1,2 & 3. You can add the following code in Theme Options > CSS

.x-sidebar.left {
    background:rgb(45,136,72);
    padding: 24px;
}

.x-sidebar.left .widget ul li a {
     color:#000;
}

Hope that helps

[Peter_Fae]

Hey. My Readers are experiencing the sidebar as too far over to the left with no whitespace while reading on an iPhone, surely as a result of the CSS that we’ve been doing in this thread. How can we resolve this, and maintain the visual look on the desktop and iPad yet have the whitespace on the phone so it flows nicely?

[ruenel]

Hello @Peter_Fae,

Please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 767px){
    .single-post .x-main.right {
        padding-left: 25px;
        padding-right: 25px;
    }
}

We would loved to know if this has work for you. Thank you.