Pro 6.3.2 Starter Stack - Headline element <p> issue

Beta
#1

I have set up a new site using the Starter Stack.

In the Headline element, I added some line breaks, which also added some <p> tags to the Content. Now due to some user agent styling, there is unwanted margin on the <p> tags within the Headline element.

image
image638×502 78.6 KB

image
image708×326 21.2 KB

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

The margin-block-end is being overridden by the following:

.x-text-content-text>p:last-child, .x-text-content-text>ul:last-child, .x-text-content-text>ol:last-child, .x-text-content-text-primary>p:last-child, .x-text-content-text-primary>ul:last-child, .x-text-content-text-primary>ol:last-child, .x-text-content-text-subheadline>p:last-child, .x-text-content-text-subheadline>ul:last-child, .x-text-content-text-subheadline>ol:last-child {
    margin-bottom: 0;
}

But the margin-block-start is not being removed for the Headline element.

This issue is not present within the Text element as it has the following CSS added:

.m7-8.x-text > :first-child {
    margin-top: 0;
}

I realise the Starter Stack probably needs some extra stylings, but I would assume the default CS element styles should cover for some of this user agent stylesheet stuff?

#2

For starter and blank yes there should probably be a CSS reset in place, at least for our elements. However I’d have to play around with as the css for elements is the same for all stacks and CS standalone. So this only happens with <p> tags? Does this happen on this site when Integrity or another stack is on? Is this the under construction plugin or is this something different?

#3

I am working on a holding page for a website that is under construction, but there is not under construction plugin active, I am just building the Front Page in Cornerstone with three basic plugins active: Gravity Forms, SiteGround Optimizer, and SiteGround Security. I have now deactivated all of those plugins to just leave Pro on its own and the issue is still present.

For further info in the Starter stack, when the HTML Tag of the Headline is set to h1, h2, h3, h4, h5, h6, div, or span, the same issue presents itself, with the extra margin-block-start applied by the user agent styling.

When the HTML Tag is set to <p>, it has the unfortunate side-effect of breaking the content out of the .x-text-content-text-primary tag:

image
image978×326 82.9 KB

Which removes any typography styling from the content of the headline.

For other stacks, this is the result:

Integrity
user agent stylesheet overridden by p { margin: 0 0 1.313em; } from integrity-light.css

Renew
user agent stylesheet overridden by p { margin: 0 0 1.5em; } from renew.css

Icon
user agent stylesheet overridden by p { margin: 0 0 1.313em; } from icon.css

Ethos
user agent stylesheet overridden by p { margin: 0 0 2.15em; } from ethos.css

All other stacks also have the similar margin-bottom: 0 override for p, ul, ol last children.

Back in the Starter stack, a similar issue is present for ul and ol tags within the Headline content, with the user agent stylesheet applying margin-block-start: 1em;.

Hope this helps in fixing the issue.

#4

Okay thanks yes this does answer what the new stacks would be missing. A bit of a css reset would be nice for the starter stack. I’ll bring over something similar to what the other stacks are doing. Most of it related to margin as you have outlined which is also applied to ul and ol elements. Have a great day!

1 Like