Make font sizes consistent between Lists and Paragraph elements.

[ErikSolveson]

Description

Please increase the paragraph's font size to match list's font size.

Example page with both lists and paragraphs side by side -> https://opensource.org/codeofconduct/

Steps to reproduce

No response

What you expected to happen

No response

What actually happened

No response

[bernattorras]

I've taken a look at it and it seems that the paragraph has a specific CSS rule to force its size to 16px.

This style was added directly from the Customizer on Sept 1st by nvidal.

Here's the link to the revision: https://opensource.org/wp-admin/revision.php?revision=9199

Please increase the paragraph's font size to match list's font size.

If the size of the paragraph needs to be increased to match the one used for the list, it would be enough to just remove this line of CSS from the customizer, although, seeing that it was added directly from the customizer with an !important makes me think that they specifically wanted to reduce the size of these paragraphs on September.

@ErikSolveson could you check that with the partner to confirm that this is what they want to do?

If instead of that, they want to decrease the size of the lists to match the paragraphs, we could update the theme's CSS to set the to ul and ol elements to font-size: initial;.

[nickvidal]

That was my fault! :)

A while ago, one of our colleagues noticed that the paragraphs were really small, and investigating I found what I think was a CSS typo. All paragraphs were fixed at 13px:

.wp-die-message, p { font-size: 13px; }

I'm guessing that extra comma affected all paragraphs.

I added the 16px !important CSS to temporarily fix the issue.

I thought I opened a ticket to report that, but I can't find it. I might have missed that, my apologies!

Any chance you could provide a proper fix?

Thanks!

[bernattorras]

No worries @nickvidal ! And thanks for these details! :)

I've found the issue you're referring to.

The .wp-die-message, p style is expected, as, as you already said in the other issue, it's part of the common.css WordPress stylesheet..

The issue here is that this stylesheet should only be enqueued in the admin and therefore, shouldn't alter the theme's styles.

I'm checking the styles and code of the site but I can't see this stylesheet or its styles being applied anywhere. If I disable the 16px !important rule from the web inspector panel, the size of the text reverts to the default one, matching the size of the list element.

If you want to give all paragraphs the same size as the list elements, I'd suggest you to remove that 16px !important rule from the Customizer and check to confirm if every paragraph from the Frontend is now using the default size.

If you find any paragraph being affected by the .wp-die-message, p style or appearing smaller than expected for some other reason, please let us know (sharing the URL of the page and perhaps a screenshot) so we can investigate why these extra styles are getting enqueued there!

[nickvidal]

That's perfect @bernattorras, let's remove the 16px. Thanks!

[bernattorras]

That's perfect @bernattorras, let's remove the 16px. Thanks!

Cool! I've gone ahead and removed the following CSS rule from the Customizer:

p {
    font-size: 16px !important;
}

I've also checked multiple pages and I see no issues with the size of the paragraph or any sign of the common.css stylesheet being enqueued from the frontend.

In any case though, @nickvidal please keep an eye on it to see if you can replicate the issue with the smaller fonts again. If you're able to replicate it again, please share the details (browser, page URL, logged-in/logged-out, screenshot, etc) in the original issue so we can investigate this conflict deeper and find the best way to fix it to prevent it from happening ever again!

For now, I'll close this issue. Feel free to reopen it in case anything else is needed! :)