Conversation
The mobile edge-to-edge margin override (--grid-margin-width: 0) was applied unconditionally to every .rich-content.media block, so any author using the media variant got full-bleed images on mobile whether they wanted it or not. Move it into an explicit .full-width class so it's an opt-in variant.
…ent media query Move .rich-content.media.full-width margin overrides into top-level media queries; the previous @media (width >= 768px) block declared --grid-margin-width with no selector, so it was dropped by the parser.
Extend the border/radius/padding reset to picture (not just video-container) and give full-width images their own aspect-ratio and radius, matching video framing.
…ding Drop the .rich-content.media padding-block rule's specificity to zero via :where() so authored spacing-* classes (e.g. spacing-4xl) win the cascade instead of being blocked by the block's own default rule.
…border on full-width Wrap media-cell images in a bordered picture frame at a fixed max-width instead of stretching to 100%, and remove the leftover border on full-width video-container images now that they render edge-to-edge.
The parent picture/video-container already constrains width, so the 100% max-width on glass-border img/video was a no-op.
DKos95
changed the title
|
This pull request is not passing all required checks. Please see this discussion for information on how to get all checks passing. Inconsistent checks can be manually retried. If a test absolutely can not pass for a good reason, please add a comment with an explanation to the PR. |
Noticed this at |
overmyheadandbody
left a comment
overmyheadandbody
left a comment
There was a problem hiding this comment.
How is the scaling mechanism supposed to work for the full width scenario? Right now it seems to exceed the viewport bounds and scales down to where it's fully visible quite late. Should the scaling effect be removed/tweaked in this case?
Looking at design again I am wondering if intentions are clear enough on what happens between some resolutions as specs aren't marked from x-y resolution, left a comment. Will re-visit this once everything is more clear, thanks for the review. |
Will re visit once specs are cleared up, thanks for the review. |
|
This one kinda feels like it might create a whack-mole game with the different |
This is fixed by narrowing the full-width to only mobile after latest design clear up. |
Fixed, thank you! |
|
If 
|
Updated, thanks! |
This branch was successfully deployed
5 participants
Title
Fix ace1209 rich-content media padding/margin overrides
Summary
.full-widthmodifier class instead of applying to all.rich-content.media--grid-margin-widthcustom property declaration inside a bare@mediablock (no selector, so it was silently dropped by the parser) — rescoped it to.rich-content.media.full-widthat the correct>= 768pxbreakpointpicture, not just.video-container, so full-width images get the same treatment as full-width videopadding-blockrule to zero via:where()so authored GWP spacing combo classes (e.g.spacing-4xl) can override the default padding, instead of losing to the block's own hardcoded ruleTest plan
.rich-content.mediarenders with default padding at mobile/tablet/desktop breakpoints when no spacing class is authoredspacing-4xl(or similar) class to a.rich-content.mediablock and confirm the authored padding now overrides the default.rich-content.media.full-widthbleeds edge-to-edge with the correct--grid-margin-widthreset at>= 768pxfull-widthmedia blocks are unaffected by the bleed stylingpictureimages get the same border/radius/aspect-ratio treatment as full-width videoResolves: MWPW-207415
Mobile video Test URLs:
Mobile image Test URLs: