bnbweb/themes/vr/portal/css/rwdgrid.css

299 lines
4.8 KiB
CSS
Raw Permalink Normal View History

2022-11-14 15:49:28 +00:00
/*********************************************************************************************
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 -10px;}
/*********************************************************************************************
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+ <EFBFBD><EFBFBD>𧢲<EFBFBD><EFBFBD>帖撘<EFBFBD>
*********************************************************************************************/
@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+ 撟單踎<EFBFBD>凒撘<EFBFBD>
*********************************************************************************************/
@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+ 撟單踎<EFBFBD>凒撘𧶏<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
*********************************************************************************************/
@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+ 撟單踎璈<EFBFBD>
*********************************************************************************************/
@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;}