/********************************************************************************************* Project : rwdg- responsive grid system for your next project URI: http://rwdgrid.com/ Version: 2.0 Author: Vineeth G S Author URI: http://www.gsvineeth.com Github URI: https://github.com/gsvineeth/rwdgrid/ ********************************************************************************************** 1. Base code 2. Mobile Grid 3. Grid 720px+ 4. Grid 1024px+ 5. Grid 1200px+ 6. Helper classes **********************************************************************************************/ /********************************************************************************************* 1. Base code *********************************************************************************************/ [class^='g-'] { float: left; padding: 10px; width:100%; box-sizing:border-box;} .clear-grid{ clear:both; float:inherit;} .row{ margin:0;} /********************************************************************************************* 2. Mobile Grid *********************************************************************************************/ .g-mv-12 { width: 100%;} .g-mv-11 { width: 91.666663%;} .g-mv-10 { width: 83.33%;} .g-mv-9 { width: 74.999997%;} .g-mv-8 { width: 66.66666664%;} .g-mv-7 { width: 58.333%;} .g-mv-6 { width: 50%;} .g-mv-5 { width: 41.6665%;} .g-mv-4 { width: 33.33%;} .g-mv-3 { width: 24.99%;} .g-mv-2 { width: 16.66666%;} .g-mv-1 { width: 8.33%;} /********************************************************************************************* 2. Grid 640px+ ��𧢲��帖撘� *********************************************************************************************/ @media only screen and (min-width: 640px) { .g-ml-12 { width: 100%;} .g-ml-11 { width: 91.666663%;} .g-ml-10 { width: 83.33%;} .g-ml-9 { width: 74.999997%;} .g-ml-8 { width: 66.66666664%;} .g-ml-7 { width: 58.333%;} .g-ml-6 { width: 50%;} .g-ml-5 { width: 41.6665%;} .g-ml-4 { width: 33.33%;} .g-ml-3 { width: 24.99%;} .g-ml-2 { width: 16.66666%;} .g-ml-1 { width: 8.33%;} } /********************************************************************************************* 3. Grid 767px+ 撟單踎�凒撘� *********************************************************************************************/ @media only screen and (min-width: 767px) { .g-tv-12 { width: 100%;} .g-tv-11 { width: 91.666663%;} .g-tv-10 { width: 83.33%;} .g-tv-9 { width: 74.999997%;} .g-tv-8 { width: 66.66666664%;} .g-tv-7 { width: 58.333%;} .g-tv-6 { width: 50%;} .g-tv-5 { width: 41.6665%;} .g-tv-4 { width: 33.33%;} .g-tv-3 { width: 24.99%;} .g-tv-2 { width: 16.66666%;} .g-tv-1 { width: 8.33%;} } /********************************************************************************************* 4. Grid 960px+ 撟單踎�凒撘𧶏���芸��蝙�鍂 *********************************************************************************************/ @media only screen and (min-width: 960px) { .g-12 { width: 100%;} .g-11 { width: 91.666663%;} .g-10 { width: 83.33%;} .g-9 { width: 74.999997%;} .g-8 { width: 66.66666664%;} .g-7 { width: 58.333%;} .g-6 { width: 50%;} .g-5 { width: 41.6665%;} .g-4 { width: 33.33%;} .g-3 { width: 24.99%;} .g-2 { width: 16.66666%;} .g-1 { width: 8.33%;} } /********************************************************************************************* 5. Grid 1024px+ 撟單踎璈� *********************************************************************************************/ @media only screen and (min-width: 1024px) { .g-tl-12 { width: 100%;} .g-tl-11 { width: 91.666663%;} .g-tl-10 { width: 83.33%;} .g-tl-9 { width: 74.999997%;} .g-tl-8 { width: 66.66666664%;} .g-tl-7 { width: 58.333%;} .g-tl-6 { width: 50%;} .g-tl-5 { width: 41.6665%;} .g-tl-4 { width: 33.33%;} .g-tl-3 { width: 24.99%;} .g-tl-2 { width: 16.66666%;} .g-tl-1 { width: 8.33%;} } /********************************************************************************************* 6. Grid 1200px+ *********************************************************************************************/ @media only screen and (min-width: 1200px) { .g-d-12 { width: 100%;} .g-d-11 { width: 91.666663%;} .g-d-10 { width: 83.33%;} .g-d-9 { width: 74.999997%;} .g-d-8 { width: 66.66666664%;} .g-d-7 { width: 58.333%;} .g-d-6 { width: 50%;} .g-d-5 { width: 41.6665%;} .g-d-4 { width: 33.33%;} .g-d-3 { width: 24.99%;} .g-d-2 { width: 16.66666%;} .g-d-1 { width: 8.33%;} } /********************************************************************************************* 6. Helper classes *********************************************************************************************/ img.rwd{ max-width: 100%; height: auto;}