[Resolved] GP 1.7 Elements – Padding

[wekhter]

I’m trying out the new Elements feature, starting out by converting some existing page headers.

One thing I noticed right away is that the “Add Padding” feature from Page Headers is no longer there (originally a checkbox, later styled as a toggle). Technically there is more fine-grained control now w/ TRBL padding settings for desktop and mobile, but the thing I appreciated about the “Add Padding” feature was that it picked up the same settings already in the customizer for spacing.

Anyway, the biggest issue is this: the new padding controls apply to .page-hero instead of .inside-page-hero (previously padding applied to .inside-page-header)

This means that if the container (.page-hero) is set to full width and the inner container (.inside-page-hero) is set to contained, because the padding is set on .page-hero (outer container) then the left/right padding does not actually have any visible effect if the screen size is wider than the max container width.

This feels more like an oversight than an intentional change, so hopefully it can be fixed soon!

[Tom]

Hi there,

The Add Padding option was one of the first options in Page Headers, but it wasn’t very popular. Very few people were using the Page Header as an extra container, which is why we removed it.

The padding being applied to the outer container is intentional. It makes it so the percentage values are actually correct.

It also makes it so the left/right padding applies only when it’s needed to prevent the content from hitting the edge of the container. Having the padding apply all the time causes the hero content to appear out of alignment with the rest of the page/containers.

Of course, you can give your hero a custom class and apply your padding to the inner container if that makes more sense for the kind of hero you’re creating.

[wekhter]

@Tom

In what way would the hero container appear out of alignment? It seems to me like applying it to the child container would make more sense overall, especially if the child container is set to contained (instead of full width)

Diagram: https://ibb.co/hfKwd9

It seems to me like if someone was using percentage padding they wouldn’t be using the contained option at all (would make more sense to have full width + percentage padding) which would still make sense to have padding on the inner container rather than the outer container, right? Either someone would want to add padding based on the full page width OR to add padding on top of the contained width. Or am I misunderstanding how the header element is normally used?

[Tom]

I can definitely see your point, but this is actually the same way it was in the old Page Headers as well. You’re only noticing it because of the lack of the Add Padding option.

In our experience, people want their hero element to align with the container below it, not the text within the container. The padding option in the Page Hero is for the hero element itself, not the text within it.

[wekhter]

@Tom

Gotcha–never realized that the previous implementation worked that way as well. I’ll use the custom class option to add in padding. Thanks for the info!

[Tom]

No problem! I appreciate the feedback 🙂

[Author]

Posts