Is there something wrong with my styles or media query? When im in my phone i lose the ability to scroll down. here is my only media query
@media (max-width: 568px) {
header {
padding: 1em 0;
position: fixed;
.logo {
width: 200px;
}
.main-nav {
display: none;
}
#burger-icon {
width: 27px;
display: block;
}
}
#section1 {
height: 500px;
text-align: center;
}
#section2 {
.col-1 {
width: 100%;
text-align: center;
}
.col-2 {
width: 100%;
padding: 0;
margin-left: 0;
margin-top: 20px;
display: block;
}
}
}
Try this
@media screen and (max-width: 568px) {
header {
padding: 1em 0;
position: fixed;
.logo {
width: 200px;
}
.main-nav {
display: none;
}
#burger-icon {
width: 27px;
display: block;
}
}
#section1 {
height: 500px;
text-align: center;
}
#section2 {
.col-1 {
width: 100%;
text-align: center;
}
.col-2 {
width: 100%;
padding: 0;
margin-left: 0;
margin-top: 20px;
display: block;
}
}