[Resolved] Single post not displaying properly

[Marjorie]

Hi,

The single post title is not to the left nor is it aligned with sidebar, and the text is too much on the left side. The image also does not fill the space. Please have a look and tell me how to fix.
https://onlinebusinesblog.com/how-to-write-a-blog-post/
Thank you

[David]

Hi there,

in Appearance > Elements – edit your Header Element:
1. set the top and bottom padding to 0.
2. set the Horizontal alignment to Left.

Now currently your post content has 0 left and right padding, so you will notice when reducing the browser the content touches the side. Go to Customizer > Layout > Container and add 20px left and right padding. This will match the default padding for your Header Element.

For the Image – go to Customizer > Layout > Blog –> Featured Images, select the Posts tab then:

1. Uncheck the Display Padding around Images.
2. Set the Alignement to Center
3. Set the Media Attachment Size to Full.
4. Remove any values from the Width and the Height.

As long as the original image is large enough to fill the space it will fill 100%.
Make those changes – if it still doesn’t fill the space let me know and ill take a look.

[Marjorie]

Hi,

I followed the instructions above but only the first part got fixed. The parts for the customizer didn’t change

[David]

hmmm… something odd – would you mind providing me with temporary Admin login to your site ?

You can share the URL, login name and password in the Private Information area.

[Marjorie]

While your in there can you put a header for post please
Thank you

[David]

Do you still want the Post Title / Meta over the featured image ?

[Marjorie]

yes please

[David]

OK – just to note – i have disable the A2 Cache plugin – its best to leave them disabled whilst you’re making these types of the changes to the site. You can re-enable it once the work is done 🙂

So i removed some of the unnecessary layout elements. And made sure the Layout Element for your Posts Content width was set to Default ( not Contained or Full Width as this removes the padding ). Now the Customizer Padding is working.

Please ensure in the Post Editor you leave the Content Container set to Default for your Posts. See here

Then i added the Featured Image as the Background to your Header Element and set the Top and Bottom padding to 33% / 33% ( totalling 66% ) as this matches the Aspect Ratio of your original featured image size eg.

1280px / 1920px * 100 = 66%.

Then last of all i add this to the Customizer > Additional CSS:

/* Single Post Hero */
.single-post .page-hero {
    position: relative;
    margin-bottom: 0;
}

.single-post .page-hero .inside-page-hero {
    position: absolute;
    padding: 40px 20px;
    background-color: rgba(255, 255, 255, 0.75);
    bottom: 0;
}

.single-post .page-hero+.post .entry-content {
    margin-top: 0;
    padding-top: 40px;
}

.single-post .page-hero+.post .entry-meta {
    display: none;
}

/* Set Hero h1 Mobile font size */
@media(max-width: 768px) {
    .single-post .page-hero h1 {
        font-size: 30px;
    }
}

This absolutely positions the Header Element content so it does not affect the height of the image. It also adds a background color behind the title / post date to make it more visible. You can remove or change this line in the CSS which sets the color to White 75% opacity:

background-color: rgba(255, 255, 255, 0.75);

Let me know 🙂

[Marjorie]

Hi David,

I haven’t logged back in but I check it as a visitor and this post https://onlinebusinesblog.com/how-to-start-a-blog/ and a few others still have the text hard on the left. And the blog archive images have all the white space around it.

Have a look and let me know
Thanks

[David]

If you can edit each of the posts that have no padding, and change the Content Container to Default, see here:

https://docs.generatepress.com/article/content-container/

[Marjorie]

I did it but every time I apply a solution something else goes wrong. This blog section giving me so much stress. Now the images in blog archive are off.

https://onlinebusinesblog.com/blog/

I need that to take up the entire space but it’s in the middle. It’s set to left align though.
I don’t know what to do.

[Ying]

Hi Marjorie,

Just to make sure that you want the featured image has no padding around it?

If so, please follow the steps below:

1. Customizing > Layout > Blog > Featured Images > Archives > Alignment > Set it to center.
2. Customizing > Layout > Blog > Featured Images > Archives > uncheck the “Display padding around images” box.

Please be noted some of your featured images are not big enough to fill up the entire space, you’ll have to replace them.

Let me know 🙂

[Marjorie]

Yes it worked. Now I’ll have to redo all my images.

Thanks

[Ying]

No problem 🙂

[Author]

Posts