![]() ![]() Think of the body as the safe area and our full bleed utility going beyond the trim area, into the bleed area. We do this by setting safe area guides.Įach element of the print canvas labelled. Because of this, print designers (like me, yay) are used to accounting for bleed in our design work. In print, we have bleed, which is the area beyond the point where the paper gets trimmed. This technique is sometimes scoffed at, but I think it works great if you think of your body element as a canvas, much like a print canvas. This hides overflow content, which in turn, prevents those scrollbars. The way I combat this is setting the following on the body element: CSS maths magic!īecause we are setting the utility’s width to 100vw, there’s a chance that you’re going to get horizontal scrollbars-especially on Windows. This is how it sits in the middle of the container, because that accurate, now negative margin is calculated and applied. Remember: 50vw equates to half of the window width. The parent element’s width is useful though, because by setting the utility’s margin-left to 50%, we are telling the component to align its left edge to the center of its parent element, because by doing this, we are setting the left margin to be half of the parent element’s width.įinally, we use calc to remove 50vw from that 50% margin value. We couldn’t set the width to be 100% because it would only fill the space of its parent element, rendering it useless. ![]() We set the utility’s width to be 100vw, which equates to the full viewport width. This targets the direct children of the full bleed utility and then applies that same “wrapper” effect. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |