Theme Toujours – How to change single post width?

Hi Aleksandra,

You can change the width of single posts with some custom CSS.

To add custom CSS: Firstly set up a child theme or activate a custom CSS plugin. (If you have Jetpack installed then you can activate its custom CSS module.)

Am I right in assuming that you’d like to make the main content wider and the sidebar smaller? If so, the following custom CSS will do the job:

.single-post #primary {
    width: calc(76.666% - 10px);
}

.single-post #secondary {
    width: calc(23.333% - 20px);
}

In the above CSS: .single-post #primary controls the width of the post’s main content and .single-post #secondary controls the width of the sidebar.

You can increase/decrease the percentages to increase/decrease the widths. Remember, both percentages need to equal 100% for the sidebar to remain next to the main content. i.e. if you increase the percentage next to .single-post #primary then you’ll need to decrease the percentage next to .single-post #secondary by the same amount.

Let me know if that’s helpful or if you were looking to achieve something slightly different.

Thanks!

Thanx for your reply, Siobhan. Means a lot.

Im trying to achieve the opposite, to make my post wider. However, you made it clear how to do it, so Ill experimentate with the widths.

I have Jetpack and Custom CSS. I`m new with all the CSS work, so sorry if my next question is funny: do I just copy that code of yours in my custom css, below all of its content?

One more question: is it possible in this theme to make the whole width smaller (single post and sidebar together)?

Aleksandra

Hi Aleksandra,

I have Jetpack and Custom CSS. I’m new with all the CSS work, so sorry if my next question is funny: do I just copy that code of yours in my custom css, below all of its content?

If you’ve activate Jetpack’s custom CSS module then you should navigate to Appearance > Edit CSS and copy/paste the CSS I gave below the introductory text in the editor there.

One more question: is it possible in this theme to make the whole width smaller (single post and sidebar together)?

You can reduce the entire width of your theme’s content area (post/page content combined with sidebar) using the following snippet:

#page {
    max-width: 1270px;
}

Similar to before, increase/decrease the value of max-width to your liking.

Let me know how that goes.

Thanx so much. The latter with the general width was enough.

It worked.

Perfect! ?? We’re right here if extra questions come up, too.