[Resolved] Lists Aren’t Displaying Properly next to Featured Image

[Clay]

My blog post isn’t displaying the UL lists properly. Something seems off.

Site is: https://nkadd.us/2022/04/21/cybersecurity-grants-for-local-governments/

The ul lists should not be that far over to the left.

How do I resolve this?

[Ying]

Hi Clay,

When you are using float leftfor image, the following text will be next to the image, the margin added to the ul element won’t be seen.

In order to see the margin, the margin need to be larger than the width of image which is 232px.

I would recommend using columnsblock for this layout, if you have GenerateBlocks plugin, the layout can be built with Grid block.

[Clay]

Right, I understand that… but this is the default Blog Single Post view… I didn’t build this at all, it just came like this; I simply added the feature image to the post? Is there a way to adjust the default view of this without building out a new post page?

[David]

Hi there,

the link you provided is 404’ing ? Can you fix that so i can take a look – or has there been a change of direction ?

Let me know

[Clay]

Sorry about that… changed permalinks 🙂

https://nkadd.us/cybersecurity-grants-for-local-governments/

[David]

The wonders of Floats, not any easy one to fix but lets give this a shot:

1. Add this CSS to your site:

@media(max-width: 768px) {
    .inside-disc {
        list-style: inside disc;
    }
}

2. Select the List Block and in Advanced > Additional CSS Class(es) field add: inside-disc

[Clay]

That moved it over to align with the text. Needs some indent now, which I can probably do.

I’m still concerned that this is the default behavior for the single post view. If I don’t add a feature image, everything works as expected. If I add a feature image, the page is broken. Is that a WordPress thing or GeneratePress thing or am I just not understanding properly?

No Featured Image, page viewed as expected: https://nkadd.us/finding-their-strengths-uncovering-student-aptitudes-for-our-talent-pipeline/

Featured Image, page broken: https://nkadd.us/cybersecurity-grants-for-local-governments/

[David]

Thats actually not the default layout for single posts.
In Customizer > Layout > Blog –> Featured Images >>> Posts you can change the location and alignment of the image. The default Alignment is Center.

Sorry i missed a reply above and i assumed you wanted to keep the Floated image (?)

[Clay]

I prefer the image aligned to the left. Correct, that is not default, centered is. Still, selecting the left alignment shouldn’t break the view, correct? But it does, unless I provide the CSS workaround?

Honestly, I may just not know enough about it, I’m not skilled in the ways of CSS. 🙂

Just feels a little off, that’s all.

[Clay]

OK, so the workaround I chose was to create the columns that Ying suggested and simply get rid of the Featured Image all together.

This seems to work the best and displays everything consistently.

Thank you for your time and sorry for all the questions!

[David]

It’s just one of the many fun foibles that come with CSS Floats.
See here:

When an element is floated it is removed from the standard content flow.
The elements that wrap the floated element effectively fill in that hole.
And that hole sucks up any margin/padding on that element.

In GP we try to keep HTML Element styles ( such as Lists ) to a bare minimum. In fact if you remove the UL styles from the theme you would barely notice any difference to the browser styles. So even without the theme, a list wrapping a floated element would behave in the same way.

And unfortunately theres no way in CSS to determine that a nested element is sitting to the side of a floated element. So it has to be treated manually.

[Author]

Posts