-
Problems
This line enable URL Rewriting . It must be enabled via the RewriteEngine directive! and if your .htaccess file is going to use rewrite rules, you should always include this line. Otherwise, you can’t be sure if its enabled or not. The string “on” is case insensitive.
<html>
<head>
<title>
</title>
<style>
/*-- setting width of body to 100 % and max-width to 1200px --*/
body{
width: 100%;
max-width: 1200px;
margin:auto;
}
/*-- applying clear around row so that column of one content do nat overflow on other-- */
.row {
clear:both;
}
/*-- setting common property for column --*/
[class*='col-'] {
float: left;
min-height: 1px;
margin:5px;
background-color: #ffffff;
}
/*-- we are dividing whole row into 6 column and other different possibility . as 100/6 = 16.66% -- */
.col-1{ width: 16.66%; }
.col-2{ width: 33.33%; }
.col-3{ width: 50%; }
.col-4{ width: 66.66%; }
.col-5{ width: 83.33%; }
.col-6{ width: 100%; }
*{
box-sizing: border-box;
}
/*-- applying media query for responsive page --*/
@media all and (max-width:800px){
.col-1{ width: 33.33%; }
.col-2{ width: 50%; }
.col-3{ width: 83.33%; }
.col-4{ width: 100%; }
.col-5{ width: 100%; }
.col-6{ width: 100%; }
.row .col-2:last-of-type{
width: 100%;
}
.row .col-5 ~ .col-1{
width: 100%;
}
}
@media all and (max-width:650px){
.col-1{ width: 50%; }
.col-2{ width: 100%; }
.col-3{ width: 100%; }
.col-4{ width: 100%; }
.col-5{ width: 100%; }
.col-6{ width: 100%; }
}
</style>
</head>
<body>
<div class="row">
<div class="col-1"> col-1 </div>
<div class="col-1"> col-1 </div>
<div class="col-1"> col-1 </div>
<div class="col-1"> col-1 </div>
</div>
<div class="row">
<div class="col-1"> col-1 </div>
<div class="col-1"> col-4 </div>
</div>
<div class="row">
<div class="col-2"> col-2 </div>
<div class="col-2"> col-2 </div>
<div class="col-2"> col-2 </div>
</div>
<div class="row">
<div class="col-3"> col-3 </div>
<div class="col-3"> col-3 </div>
</div>
<div class="row">
<div class="col-4"> col-4 </div>
<div class="col-2"> col-2 </div>
</div>
<div class="row">
<div class="col-5"> col-5 </div>
<div class="col-1"> col-1 </div>
</div>
<div class="row">
<div class="col-6"> col-6 </div>
</div>
</body>
</html>
No comments:
Post a Comment