Collapse
←This set of media query related helper classes makes flowed content collapse on smaller sizes. -t is for tablet and -p for phone screen resolutions. This class can be applied in combination with .grid, .flex or .column.
There are additional responsive helper methods for each conent flow method: grid breakpoints, flex breakpoints and column breakpoints.
Syntax:
.collapse-{breakpoint}
SCSS:
_media-queries.scss
.collapse-t
will
collapse
on
tablet
screen
size
so
that
every
word
is
one
row
.collapse-p
will
collapse
on
tablet
screen
size
so
that
every
word
is
one
row
<div class="flex gap-no collapse-t">
<div class="box bg-t text-mono">.collapse-t</div>
<div class="box bg-a">will</div>
<div class="box bg-b">collapse</div>
<div class="box bg-c">on</div>
<div class="box bg-d">tablet</div>
<div class="box bg-e">screen</div>
<div class="box bg-f">size</div>
<div class="box bg-g">so</div>
<div class="box bg-h">that</div>
<div class="box bg-i">every</div>
<div class="box bg-j">word</div>
<div class="box bg-k">is</div>
<div class="box bg-l">one</div>
<div class="box bg-m">row</div>
</div>
<div class="flex gap-no collapse-p ma-t_s">
<div class="box bg-t text-mono">.collapse-p</div>
<div class="box bg-a">will</div>
<div class="box bg-b">collapse</div>
<div class="box bg-c">on</div>
<div class="box bg-d">tablet</div>
<div class="box bg-e">screen</div>
<div class="box bg-f">size</div>
<div class="box bg-g">so</div>
<div class="box bg-h">that</div>
<div class="box bg-i">every</div>
<div class="box bg-j">word</div>
<div class="box bg-k">is</div>
<div class="box bg-l">one</div>
<div class="box bg-m">row</div>
</div>