Difference between revisions of "User:Makanyane/twc.css"
From TWC Wiki
Jump to navigationJump to searchLine 41: | Line 41: | ||
/* REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */ | /* REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */ | ||
− | @media only screen and (max-width: | + | @media only screen and (max-width: 700px) { |
.col { | .col { | ||
margin: 1% 0 1% 0%; | margin: 1% 0 1% 0%; | ||
Line 60: | Line 60: | ||
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ | /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ | ||
− | @media only screen and (max-width: | + | @media only screen and (max-width: 700px) { |
.col { margin: 1% 0 1% 0%;} | .col { margin: 1% 0 1% 0%;} | ||
.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; } | .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; } | ||
Line 78: | Line 78: | ||
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ | /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ | ||
− | @media only screen and (max-width: | + | @media only screen and (max-width: 700px) { |
.span_2_of_2 { | .span_2_of_2 { | ||
width: 100%; | width: 100%; | ||
Line 97: | Line 97: | ||
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ | /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ | ||
− | @media only screen and (max-width: | + | @media only screen and (max-width: 700px) { |
.span_40_of_2 { | .span_40_of_2 { | ||
width: 100%; | width: 100%; |
Revision as of 00:18, 17 May 2019
/* Mak's testing area for twc skin */ /* STYLING */ div.section, div.group { border: none; background: none; } /* 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: 700px) { .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: 700px) { .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: 700px) { .span_2_of_2 { width: 100%; } .span_1_of_2 { width: 100%; } } /* GRID OF TWO 40/60============================================================================= */ .span_40_of_2 { width: 39.36%; } .span_60_of_2 { width: 59.04%; } /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ @media only screen and (max-width: 700px) { .span_40_of_2 { width: 100%; } .span_60_of_2 { width: 100%; } } .TWCportal_1 { border: none; padding: .4em .9em .9em; color: black; vertical-align: top; background: rgb(227,227,227); background: linear-gradient(180deg, rgba(165,165,180,0.5) 0%, rgba(165,165,180,0) 100%); } .TWCportal_2 { border: none; padding: .4em .9em .9em; color: black; vertical-align: top; background: rgb(205,199,199); background: linear-gradient(180deg, rgba(168,160,162,0.5) 0%, rgba(168,160,162,0) 100%); } .TWCportal_3 { border: none; padding: .4em .9em .9em; color: black; vertical-align: top; background: rgb(229,225,219); background: linear-gradient(180deg, rgba(168,168,162,0.5) 0%, rgba(168,168,162,0) 100%); } .TWCportal_head { padding:5px; background:#7d1515; color:white; margin-bottom: 0em; }