Adding margins to blog and post pages

[mairhoefer]

Hi,

I’m trying to add margins to the left and right of the blog and post pages. However, after trying several CSS snippets found in the forum, I still cannot get it to work. Could you help me out and show me how its done properly?

Thanks in advance!

JP

[rad]

Hi @mairhoefer,

Thanks for reaching out.

I recommend lowering your site’s max-width to 800px, or please add this CSS to your Theme Options > CSS

.blog .x-site > .x-container.max, .single-post .x-site > .x-container.max {
    max-width: 800px;
}

It appears to have no space since the max width is greater than the box layout itself.

Hope this helps.

[mairhoefer]

Hi,

that worked for the blog page, but on individual post pages the headlines don’t seem to adjust. Can these pages be modified as well?

Best,

JP

[ruenel]

Hello JP,

The code given by Rad works perfectly. It adjust the container to 800px. The problem is that your 3rd party plugin WP Ultimate Recipe gave only 600 pixel for the post contents.

Using Rad’s code, we can update it and use this:

.blog .x-site > .x-container.max, 
.single-post .x-site > .x-container.max {
    max-width: 600px;
}

This should display your post pages with the header, featured image and the post contents aligned to each other.

Hope this helps.

[mairhoefer]

Hi,

I see what you mean. Thank you for clarifying that. However, I adjusted the max-width to 600px, and nothing really seems to have changed. Additionally, I noticed that the post (including headline font and image) looks completely different in your screenshot, compared to what I see. Is there any reason for that? It looks like the site is using a different stack?

Thanks again, and thanks for your patience!

JP

[ruenel]

Hello JP,

The code given is correct. It only applies to single post items though.
The page in question is actually a single recipe post which is not part of the code. You will need to update it and use this instead:

.blog .x-site > .x-container.max, 
.single-post .x-site > .x-container.max,
.single-recipe .x-site > .x-container.max {
    max-width: 600px;
}

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

[mairhoefer]

Hi,

that one did the trick! Amazing, thank you for your quick replies!

Best,

JP

[ruenel]

You’re welcome!
We’re glad we were able to help you out.