Difference between revisions of "User:Makanyane/twc.css"
From TWC Wiki
Jump to navigationJump to searchLine 1: | Line 1: | ||
/* Mak's testing area for twc skin */ | /* Mak's testing area for twc skin */ | ||
− | /* SECTIONS */ | + | /* SECTIONS ============================================================================= */ |
+ | |||
.section { | .section { | ||
clear: both; | clear: both; | ||
Line 7: | Line 8: | ||
} | } | ||
− | /* | + | /* GROUPING ============================================================================= */ |
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
.group:before, | .group:before, | ||
.group:after { | .group:after { | ||
− | + | content:""; | |
− | + | display:table; | |
} | } | ||
.group:after { | .group:after { | ||
− | + | clear:both; | |
} | } | ||
.group { | .group { | ||
− | zoom:1; /* For IE 6/7 */ | + | zoom:1; /* For IE 6/7 (trigger hasLayout) */ |
+ | } | ||
+ | |||
+ | /* GRID COLUMN SETUP ==================================================================== */ | ||
+ | |||
+ | .col { | ||
+ | display: block; | ||
+ | float:left; | ||
+ | margin: 1% 0 1% 1.6%; | ||
+ | } | ||
+ | |||
+ | .col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */ | ||
+ | |||
+ | |||
+ | /* REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */ | ||
+ | |||
+ | @media only screen and (max-width: 600px) { | ||
+ | .col { | ||
+ | margin: 1% 0 1% 0%; | ||
+ | } | ||
} | } | ||
Revision as of 07:06, 16 May 2019
/* Mak's testing area for twc skin */ /* SECTIONS ============================================================================= */ .section { clear: both; padding: 0px; margin: 0px; } /* GROUPING ============================================================================= */ .group:before, .group:after { content:""; display:table; } .group:after { clear:both; } .group { zoom:1; /* For IE 6/7 (trigger hasLayout) */ } /* GRID COLUMN SETUP ==================================================================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */ /* REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */ @media only screen and (max-width: 600px) { .col { margin: 1% 0 1% 0%; } } /* GRID OF THREE */ .span_3_of_3 { width: 100%; } .span_2_of_3 { width: 66.1%; } .span_1_of_3 { width: 32.2%; } /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ @media only screen and (max-width: 600px) { .col { margin: 1% 0 1% 0%;} .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; } } /* 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: 600px) { .span_2_of_2 { width: 100%; } .span_1_of_2 { width: 100%; } }