Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Background graphic on News homepage is being cut off. #382

Open
Nyiriland opened this issue Jun 17, 2022 · 0 comments
Open

Background graphic on News homepage is being cut off. #382

Nyiriland opened this issue Jun 17, 2022 · 0 comments

Comments

@Nyiriland
Copy link

Issue
The background "brush stroke" graphic (created with body.news-front-page .front__site-title::after) is cut off on desktop sizes. I've turned the graphic green in the screenshot below for clarity:

image

Solution

  1. To remove the gap on the right side: increase left on the above pseudo element to left: 200px; (all screen widths)
  2. To prevent the bottom of the brushstroke from cutting off, the best way I can figure it out is to add the CSS below:
@media (min-width: 1042px) {
body.news-front-page .front__site-title::after {
    height: auto;
    aspect-ratio: 842 / 130;
}
}

^ What this does: at the viewport width of 1042px, the point where the graphic starts overflowing its container height (due to the svg mask-size set to 'cover'), we lock the container to an aspect ratio so the graphic continues to scale with the expanding viewport width.

Note the above code has only been tested in Chrome.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant