Foundation provides a useful class for buttons called
expand
which expands a button element to the
full-width of the page.
There are several other element types which could greatly benefit from full-width expansion and 0-width padding on mobile, and Foundation Mobile adds those.
Add the expand
class to button-groups to go
from this:
To this:
Add the expand
class to block-grid elements to go
from this:
To this:
Or, you may wish for just the inner elements to touch, but have
the outer container maintain its padding from the edge of the
screen. In that case, just add the expand-inner
class to
the block-grid element instead.
Click here to switch the
above block-grid element to the expand-inner
class.
Add the expand
class to Foundation Mobile's
mobile-list elements to go from this:
To this:
Add the expand
class to Foundation Mobile's
data-collapsible
elements to go from this:
This block of text is collapsed by default.
This block of text is not collapsed by default.
To this:
Add the expand
class to table elements to go from this:
A | B |
---|---|
Property 1a | Property 1b |
Property 2a | Property 2b |
Property 3a | Property 3b |
To this:
A | B |
---|---|
Property 1a | Property 1b |
Property 2a | Property 2b |
Property 3a | Property 3b |