/* MEDIA QUERIES */
@media only screen and (max-width: 1190px) {
.col-4-port {
width: 33.33%;
}
}
@media only screen and (max-width: 910px) {
.navbar {
overflow: hidden;
position: absolute;
right: 30px;
top: 70px;
display: block;
z-index: 33;
}
.burger-nav {
background-image: url(../img/hamburger.png);
height: 33px;
background-repeat: no-repeat;
width: 100%;
text-align: center;
display: block;
float: right;
width: 40px;
cursor: pointer;
margin-bottom: 14px;
}
.container nav ul{
height: 0;
overflow: hidden;
}
.container nav ul.open{
height: auto;
clear: both;
}
.container nav ul li{
display: block;
font: none;
text-align: right;
width: auto;
margin: 0;
}
.container nav ul li a{
display: block;
background-color: #fff;
color: #503392;
padding: 10px 20px;
margin: 0;
z-index: 10;
}
.container nav ul li a:hover{
border: none;
}
.feature-headding{
width: 100%;
float: none;
}
.feature-headding h2{
font-size: 100px;
text-align: center;
}
.do{
display: inline;
}
.feature-detail{
float: none;
width: 90%;
margin-top: 15px;
}
.li-feature h3{
margin-bottom: 10px;
}
#services{
background-image: none;
}
.service {
width: 80%;
}
.col-4-port,.col-4-stats{
width: 50%;
text-align: center;
}
.col-4-stats{
margin-top: 0;
}
form{
float: none;
text-align: center;
width: 100%;
}
.add{
float: none;
}
.form-input{
width: 80%;
margin-left: auto;
margin-right: auto;
}
.btn-send{
width: 100%;
}
.address{
float: none;
}
}
@media only screen and (max-width: 630px) {
.ul-portfolio li a{
margin: 10px 10px;
}
.col-4-port,.col-4-stats{
width: 100%;
text-align: center;
}
.col-4-stats{
margin-top: 0;
}
.copy{
margin-bottom: 20px;
float: none;
text-align: center;
width: 90%;
}
.copy p{
float: none;
}
.social-links{
float: none;
width: 100%;
text-align: center;
}
}
Code fusion is a web development learning blog youtube channel
Tuesday, 20 October 2020
PART 10 PSD to HTML Media Queries Responsive [HTML/ CSS] [Code Fusion]
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment