Basic-page
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@media screen and (min-width:480px){
/*****************************
TWO COLUMN LAYOUT
******************************/
#primary{
width: 50%;
float:left;
}
#secondary{
width: 40%;
float:right;
}
/*****************************
2.5 each side = 5
3 * 5 = 15 Total of margin
100% - 15% = 85%
85% / 3 = 28.33333333333333
THREE COLUMN LAYOUT
******************************/
#gallery li{
width: 28.3333%;
}
#gallery li:nth-child (4n){/***Clear left 4 element in 3 column layout***/
clear:left;
}
/*****************************
PAGE : ABOUT
******************************/
.profile-photo{
float:left;
margin:0 5% 80px 0;
}
}
@media screen and (min-width:660px){
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section id="primary">
</section>
<section id="secondary">
</section>
</body>
</html>