gabed123 gabed123 - 4 years ago 121
Sass (Sass) Question

Media Query not working

The CSS is in a .scss file and being minified with Gulp which works without any issues. I'm testing the responsiveness is Chrome(resizing the webpage). I have added

<meta name="viewport" content="width=device-width, initial-scale=1">


HTML

<div class="container text-center" >
<h1 class="banner-title">Welcome Refugees</h1>
</div>


.SCSS

.banner-title {
margin-top: 275px;
font-size: 700%;
}
@media only screen and (min-width: 400px)
and (max-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {

.banner-title {
font-size: 500%;
}

}


Is this a common issue?

Answer Source

i found this on a blog http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32

profile-pic {
  float: left;
  width: 250px;
}
@media screen and (max-width: 320px) {
  .profile-pic {
    width: 100px;
    float: none;
  }
}
@media screen and (min-width: 1200px) {
  .profile-pic {
    float: right;
  }
}

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download