You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
Solution
To remove the gap on the right side: increase left on the above pseudo element to left: 200px; (all screen widths)
To prevent the bottom of the brushstroke from cutting off, the best way I can figure it out is to add the CSS below:
^ 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.
The text was updated successfully, but these errors were encountered:
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:Solution
left
on the above pseudo element toleft: 200px;
(all screen widths)^ 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.
The text was updated successfully, but these errors were encountered: