Add Padding To Left On Single Post Pages

Hi Michelle,

I'm unable to check the page as the site is in maintenance mode. I was going to try to log in but the credentials provided seemed incomplete.

Can you confirm and recheck the details provided?

Or perhaps simply disable maintenance mode temporarily so we can inspect the site and provide the necessary CSS writeup? Let us know. :D

I just deactivated the Maintenance Mode.

I hope you can see it now: https://www.reachingmyworld.com/splashing

Ah I see now. Thanks.

I don't think adding padding would be the best approach to this because your featured image's width has a good chance of not being uniform if you don't upload a uniform size featured photo for all images.

This post's current size is 900px width but if on another posts you've uploaded a 1200px width image then the featured image will effectively go full-width.

This means the padding we'll be adding won't be a perfect fit for all the variant sizes of feature image you'll upload.

My suggestion would be to make sure the element of the page always goes full width first using this CSS:

.featured-image.page-header-image-single img {
    width: 100%;
}

and then apply padding if you wish to make the view more narrow.

body.single-post .inside-article > * {
    padding: 0 40px;
}

Good thinking. What you said is good advice since many people use random image sizes.

I use the same size images for every post though.

When I input this code, full-sized images looked too large to me. I would rather keep them 900px wide and move the text to the right.
How might I achieve this?

It's keep a smaller sized image as much as possible in consideration to page load performance.

Larger image means slower loading time. :)

When I added the code you gave me, it made my 900px images enlarge to full screen. I want to keep my images 900px wide (I size them all the same) and make the text align.

.featured-image.page-header-image-single img {
width: 100%;
}
body.single-post .inside-article > * {
padding: 0 40px;
}

I see:

We can set the rest to follow the 900px width so it's evenly aligned.

Try this CSS:

body.single-post .inside-article > * {
    max-width: 900px;
    margin: 0 auto;
}

All the contents will be aligned to the featured image's size like this - https://share.getcloudapp.com/nOu5g5nn - but there will be a significant negative space on the sides. I'd consider reducing the Content container width in this case to address it. (by default, it's 1200px)

Elvin,

I took your first code and tweaked the margins. I like the way it looks now. Thank you.

Here's what I ended up with:

/*Center text content on Single Post Page*/
body.single-post .inside-article > * {
padding: 0 70px;
}

https://www.reachingmyworld.com/narrow-up-a-child/

Nice one. Glad you got it sorted. :D

Hey Elvin,

For some reason, when I added this code, the space between my post navigation and author box disappeared. How can I add padding between them?

https://www.reachingmyworld.com/narrow-up-a-child

Ah, that's likely because of this one:

body.single-post .inside-article > * {
    max-width: 900px;
    margin: 0 auto;
}

Let's change that a bit into this:

body.single-post .inside-article > *:not(.author-box) {
    max-width: 900px;
    margin: 0 auto;
}

body.single-post .inside-article > .author-box {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

That worked. One more detail: Adding a space between the featured image and the start of the text. I suppose I could just add a space in the post itself.

It's almost perfect... :)

Modify this:

body.single-post .inside-article > *:not(.author-box) {
    max-width: 900px;
    margin: 0 auto;
}

to this:

body.single-post .inside-article > *:not(.author-box, .featured-image) {
    max-width: 900px;
    margin: 0 auto;
}