3 ms·
Your modification is actually harming the responsiveness. What’s there already handles responsiveness perfectly, whereas your alterations break the whole point
by chrismorgan 4y ago
Your modification is actually harming the responsiveness. What’s there already handles responsiveness perfectly, whereas your alterations break the whole point of the exercise, bleed, as well as breaking column centring.
- swyx 4y agoi effectively set the differences to 0, to let it bleed on mobile. what do you mean breaking column centring? it looks fine on my test https://deploy-preview-127--swyxkit.netlify.app/layout-breakouts-in-swyxkit https://deploy-preview-127--swyxkit.netlify.app/layout-break...
- chrismorgan 4y agoWith the code you posted in this thread paired with the proper markup, below a viewport width of 640px the column will be hard against the left edge, with a double gap (or a bit more, depending on font metrics) on the right. The problem is you’ve put this inside a container that already has a side gap, which is not how it was supposed to be used. Inspect the grid tracks on the original article at various viewport sizes. Full bleed means that the item goes right to the edge of the viewport.