The default browser styling — no CSS in any respect — seems to be like this:
So, every of these <dt>s, on this case, occur to be properly tucked away to the left within the area that the margin-inline-start makes for the <dd>s. Which implies that in extraordinarily little CSS we are able to kick on that “stick sections” idea:
And now that the core “performance” works, the remainder of the styling is simply aesthetic sugar:
CodePen Embed Fallback
The model on 30 seconds of code makes use of a CSS Grid format for the listing objects, which admittedly is extra strong. I simply thought it was attention-grabbing how shut you may get in so little CSS with out it. Additionally they have a model the place the <dt>s stretch the entire width which can be good.
At Marketing Solution Australia we strive to deliverer elegant responsive websites for your business integrated with our personal SEO Optimization package to bring your pages on the first page of Google.