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">
<div class="container text-center" >
<h1 class="banner-title">Welcome Refugees</h1>
</div>
.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%;
}
}
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;
}
}