Blog Margin: CSS?

[ASTI]

Hello!

I was wondering if there was a quick fix to change the way my blogs are margined ONLY on the single blog post pages and nothing more on the site. I have used .blog, .event, and other holistically covered CSS classes to manipulate stuff on my site before, but I was wondering if there was a way to target only the entry (non-sidebar) content ONLY on single blog pages.

Here is a link to one of my blog posts: https://www.asti.com/7-misconceptions-about-the-fab-to-revit-move/

Basically, I would like the information written on the left to be buched closer together, but only on these pages.

Is there a quick fix for something like this?

Thanks!

[Prasant]

Hello @ASTI,

Thanks for asking.

You can add following CSS under Pro > Theme Options > CSS:

.single-post .x-main.left {
    width: 74% !important;
}

.single-post aside.x-sidebar.right {
    width: 24% !important;
}

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.

[ASTI]

This is close to what I’m looking for, but what I would like to do is condense all of the margins in so that the blog entry content and the sidebar out to the right of the content only take up about 60% of the page.

Is that possible?

Thanks in advance.

[Prasant]

Hello @ASTI,

Thanks for updating the thread.

Please replace previous code with following and let us know if that’s the outcome you are looking for:

.single-post .x-container.width {
    width: 60% !important;
}


.single-post .x-main.left {
    width: 62% !important;
}

.single-post aside.x-sidebar.right {
    width: 35% !important;
}

Thanks.