Responsive Shopping website UI using Html and Css | | Tamil
Source for Responsive web layout
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.empty::before{
content:'';
position:absolute;
right:0px;
top:0px;
width:100%;
height:100px;
background-color:dodgerblue;
z-index:-1;
}
.nav li{
display:none;
}
.navicon {
margin:25px 0 0 30%;
}
.container {
display:block;
}
.info{
margin:25% 0 0 60px;
}
.optional{
margin:50px 0 0 0;
}
.optional h3{
font-size:15px;
}
.optional h3:nth-child(1){
margin-left:10px;
}
.info .min{
display:block;
width:300px;
height:300px;
position:relative;
left:8px;
}
.info button{
margin-top:20px;
}
.product img{
display:none;
}
.icons{
margin:-37px 0 0 190px;
}
.icons i{
color:#000;
margin-left:30px;
}
.logo{
background-image: url('../images/logo2.png');
background-repeat: no-repeat;
background-size:contain;
}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.empty::before{
content:'';
position:absolute;
right:0px;
top:0px;
width:100%;
height:100px;
background-color:dodgerblue;
z-index:-1;
}
.nav li{
display:none;
}
.navicon {
margin:25px 0 0 55%;
}
.container {
display:block;
text-align:center;
}
.info{
margin:10% 0 0 60px;
}
.optional{
margin:50px 0 0 0;
}
.optional h3{
font-size:15px;
}
.optional h3:nth-child(1){
margin-left:150px;
}
.info .min{
display:block;
width:320px;
height:320px;
position:relative;
top:20px;
left:128px;
}
.price{
margin:15% 0 0 0;
}
.info button{
margin-top:20px;
}
.product img{
display:none;
}
.icons{
margin:40px 0 0 250px;
}
.icons i{
color:#000;
margin-left:30px;
}
.logo{
background-image: url('../images/logo2.png');
background-repeat: no-repeat;
background-size:contain;
}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.empty::before{
width:400px;
height:580px;
}
.nav li{
display:none;
}
.navicon {
margin:35px 0 0 60%;
}
.container {
display:inline-flex;
}
.info{
margin:5% 0 0 80px;
}
.optional{
margin:50px 0 0 45%;
}
.optional h3{
display:inline;
font-size:10px;
margin-left:100px;
}
.info .min{
display:none;
}
.info h1{
font-family:sans-serif;
font-size:2em;
color:dodgerblue;
}
.product img{
display:block;
}
.icons{
margin:0 0 0 57%;
}
.icons i{
color:#fff;
margin-left:50px;
}
.logo{
background-image: url('../images/logo.png');
background-repeat: no-repeat;
background-size:contain;
}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.empty::before{
width:450px;
height:580px;
}
.nav li{
display:inline;
}
.nav li:nth-child(4),li:nth-child(3){
display:none;
}
.navicon {
margin:35px 0 0 50%;
}
.container {
display:inline-flex;
}
.info{
margin:5% 0 0 100px;
}
.optional{
margin:50px 0 0 48%;
}
.optional h3{
display:inline;
font-size:13px;
margin-left:100px;
}
.info .min{
display:none;
}
.product img{
display:block;
}
.icons{
margin:0 0 0 75%;
}
.icons i{
color:#fff;
margin-left:35px;
}
.logo{
background-image: url('../images/logo.png');
background-repeat: no-repeat;
background-size:contain;
}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.empty::before{
width:500px;
height:580px;
}
.nav li{
display:inline;
}
.nav li:nth-child(4){
display:inline;
}
.navicon {
margin:35px 0 0 41%;
}
.container {
display:inline-flex;
}
.info{
margin:5% 0 0 250px;
}
.optional{
margin:50px 0 0 54%;
}
.optional h3{
display:inline;
font-size:17px;
margin-left:100px;
}
.info .min{
display:none;
}
.info h1{
font-family:sans-serif;
font-size:2.5em;
color:dodgerblue;
}
.product img{
display:block;
}
.icons{
margin:-20px 0 0 75%;
}
.icons i{
color:#fff;
margin-left:50px;
}
.logo{
background-image: url('../images/logo.png');
background-repeat: no-repeat;
background-size:contain;
}
}
Comments
Post a Comment