From b9ae83ff4f57102ea4d49507a5a0160a4df3fc40 Mon Sep 17 00:00:00 2001 From: Veikka Kähkönen Date: Tue, 7 Nov 2017 19:49:27 +0200 Subject: Add responsive grid CSS --- _sass/_grid.scss | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 _sass/_grid.scss (limited to '_sass') diff --git a/_sass/_grid.scss b/_sass/_grid.scss new file mode 100644 index 0000000..da3e2d9 --- /dev/null +++ b/_sass/_grid.scss @@ -0,0 +1,42 @@ +// From http://www.responsivegridsystem.com/calculator/ + +/* SECTIONS */ +.section { + clear: both; + padding: 0px; + margin: 0px; +} + +/* COLUMN SETUP */ +.col { + display: block; + float:left; + margin: 1% 0 1% 1.6%; +} +.col:first-child { margin-left: 0; } + +/* GROUPING */ +.group:before, +.group:after { content:""; display:table; } +.group:after { clear:both;} +.group { zoom:1; /* For IE 6/7 */ } + +/* GRID OF TWO */ +.span_2_of_2 { + width: 100%; +} +.span_1_of_2 { + width: 49.2%; +} + +/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ + +@media only screen and (max-width: 480px) { + .col { + margin: 1% 0 1% 0%; + } +} + +@media only screen and (max-width: 480px) { + .span_2_of_2, .span_1_of_2 { width: 100%; } +} -- cgit v1.3