From 9385194fa3392a7162e7535cc2478814e382ff8a Mon Sep 17 00:00:00 2001 From: =?utf8?q?Vladim=C3=ADr=20Vondru=C5=A1?= Date: Mon, 10 May 2021 15:06:04 +0200 Subject: [PATCH] doc: mention m-clearfix also for floating elements. That's where people will use it the most. Funnily enough the clearfix already had to be used in the markup, so that's one more reason to just put it directly in the snippet. --- doc/css/grid.rst | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/doc/css/grid.rst b/doc/css/grid.rst index 5c802fba..e0912d2c 100644 --- a/doc/css/grid.rst +++ b/doc/css/grid.rst @@ -229,11 +229,15 @@ content based on screen width. Learn by example: ================== It's also possible to responsively float or align the elements around using -:css:`m-left-*`, :css:`m-right-*` and :css:`m-center-*` if you put the +:css:`.m-left-*`, :css:`.m-right-*` and :css:`.m-center-*` if you put the :css:`.m-col-*` elements directly into text flow without wrapping them in a :css:`.m-row` element. The following example will float the contents to the right on medium-size screens, center them on small and put them full-width -on tiny screens: +on tiny screens. + +Perhaps even more important than in the `wrapping case mentioned above <#wrapping-around>`_ +is adding a :css:`.m-clearfix-*` element after, to avoid the floating element +cutting into unrelated content that follows. .. code:: html @@ -244,6 +248,7 @@ on tiny screens: tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
.. raw:: html @@ -254,10 +259,7 @@ on tiny screens: tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

- -.. container:: m-clearfix-m - - .. +
Left-aligned floating blocks additionally have :css:`1rem` padding on the right and right-aligned blocks on the left. All of them have implicitly padding on bottom, except if the element is a last child. Add a :css:`.m-nopadb` class to -- 2.30.2