Responsive Classes and Media Screens

Class
⧪

<meta name="viewport" content="width=device-width">


⧪

<style>

.align-right{float:right;margin:5px}
.align-left{float:left;margin:5px}
.nested {margin:10px}
 .twenty {width: 20%;height:auto}
.twentyfive {width: 25%;height:auto}
.thirty {width: 30%;height:auto}
.thirtyfive {width: 35%;height:auto}
.forty {width: 40%;height:auto}
.fortyfive {width: 45%;height:auto}
.fifty {width: 50%;height:auto}
.fiftyfive{width: 55%;height:auto}
.sixty {width: 60%;height:auto}
.sixtyfive {width: 65%;height:auto}
.seventy {width: 70%;height:auto}
.seventyfive {width: 75%;height:auto}
.eighty {width: 80%;height:auto}
.eightyfive {width: 85%;height:auto}
.ninty {width: 90%;height:auto}
.nintyfive {width: 95%;height:auto}
.onehundred {width: 100%;height:auto}
.{{ Class }}_01{width:8.3333333333333%;}
.{{ Class }}_02{width:16.666666666667%;}
.{{ Class }}_03{width:25%;}
.{{ Class }}_04{width:33.333333333333%;}
.{{ Class }}_05{width:41.666666666667%;}
.{{ Class }}_06{width:50%;}
.{{ Class }}_07{width:58.333333333333%;}
.{{ Class }}_08{width:66.666666666667%;}
.{{ Class }}_09{width:75%;}
.{{ Class }}_10{width:83.333333333333%;}
.{{ Class }}_11{width:91.666666666667%;}
.{{ Class }}_12{width:100%;}


@media screen and (min-width: 0px) and (max-width: 479px)
{
.{{ Class }}_01,
.{{ Class }}_02,
.{{ Class }}_03,
.{{ Class }}_04,
.{{ Class }}_05,
.{{ Class }}_06,
.{{ Class }}_07,
.{{ Class }}_08,
.{{ Class }}_09,
.{{ Class }}_10,
.{{ Class }}_11,
.{{ Class }}_12 {
display:block;
float: none;
min-width: 100%;
}
}

</style>