I'm building a pretty straight forward weather app. I'm trying to make the app, mobile responsive. However, the media queries I add do not resize the app when the screen is smaller.
HTML:
<body>
<div id="weather_wrapper">
<div class="weatherCard">
<div class="currentTemp">
<p class = "help">Click on the temp to change units</p>
<p class="location"></p>
<p class="temp"></p>
</div>
<div class="currentWeather">
<span class = "weather-description"></span>
<span class="conditions"></span>
<div class="info">
<span class="rain"></span>
<span class="wind"></span>
</div>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src="app.js"></script>
</body>
CSS:
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
@import url(https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.2/css/weather-icons.min.css);
@media screen and (max-width: 350px) {
body{
width: 300px;
height: 150px
}
#weather_wrapper{
width: 300px;
}
.weatherCard{
width: 300px;
}
}
body{
background: linear-gradient(90deg, #7474BF 10%, #348AC7 90%);
font-family: 'Open Sans';
}
#weather_wrapper{
width: 500px;
margin-left: 450px;
margin-top: 150px;
}
.weatherCard{
width: 400px;
height: 200px;
font-family: 'Open Sans';
position: relative;
}
.currentTemp{
width: 220px;
height: 200px;
background: rgb(41, 41, 41);
color: rgb(255, 255, 255);
position: absolute;
}
.temp:hover{
text-decoration: underline;
cursor: pointer;
}
.currentWeather{
width: 180px;
height: 200px;
background: rgb(237, 237, 237);
margin: 0;
position: absolute;
top: 0;
right: 0;
}
.help{
font-size: 15px;
text-align: center;
top: 15px;
position: absolute;
color: rgb(255, 255, 255);
}
.info{
background: rgb(42, 178, 234);
position: absolute;
bottom: 0;
right: 0;
width: 180px;
height: 50px;
}
.temp{
width: 100px;
height: 50px;
margin-top: 110px;
margin-left: 80px;
position: absolute;
color: rgb(255, 255, 255);
}
.location{
width: 120px;
height: 30px;
margin-top: 80px;
margin-left: 80px;
position: absolute;
color: rgb(237, 237, 237)
}
.conditions{
width: 100px;
height: 30px;
margin-top: 40px;
margin-left: 60px;
position: absolute;
}
.weather-description{
margin-left: 59px;
margin-top: 30px;
margin-bottom: 50px;
position: absolute;
}
.wind {
width: 100%;
margin-left: 30px;
position: relative;
font-size: 14px;
}
.wind::after {
display: block;
content: '\f050';
font-family: weathericons;
font-size: 25px;
margin-left: 75px;
position: absolute;
bottom: -26px;
}
JS Fiddle: https://jsfiddle.net/hpsfj653/
I know that if I set a maximum-width then it should target all screens below that size. However, the only thing that really changes is the body width. I also considered setting the ´margin´ for the ´#weather_Wrapper´ and ´.WeatherCard´ to 0. However, that did not work.
Is there something that I am missing?
I see you did not remove your left margin when responsive and you should follow css specificity. For more details about css specificity
See w3schools css specificity tutorials
you had used your media that does not follow specificity,
also you can try using !important it will work fine.
see the snippet below.
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
@import url(https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.2/css/weather-icons.min.css);
body{
background: linear-gradient(90deg, #7474BF 10%, #348AC7 90%);
font-family: 'Open Sans';
}
@media screen and (max-width: 350px) {
body{
width: 300px!important;
height: 150px!important;
}
#weather_wrapper{
width: 100%!important;
margin-left: 0px!important;
}
.weatherCard{
width: 100%!important;
}
}
#weather_wrapper{
width: 500px;
margin-left: 450px;
margin-top: 150px;
}
.weatherCard{
width: 400px;
height: 200px;
font-family: 'Open Sans';
position: relative;
}
.currentTemp{
width: 220px;
height: 200px;
background: rgb(41, 41, 41);
color: rgb(255, 255, 255);
position: absolute;
}
.temp:hover{
text-decoration: underline;
cursor: pointer;
}
.currentWeather{
width: 180px;
height: 200px;
background: rgb(237, 237, 237);
margin: 0;
position: absolute;
top: 0;
right: 0;
}
.help{
font-size: 15px;
text-align: center;
top: 15px;
position: absolute;
color: rgb(255, 255, 255);
}
.info{
background: rgb(42, 178, 234);
position: absolute;
bottom: 0;
right: 0;
width: 180px;
height: 50px;
}
.temp{
width: 100px;
height: 50px;
margin-top: 110px;
margin-left: 80px;
position: absolute;
color: rgb(255, 255, 255);
}
.location{
width: 120px;
height: 30px;
margin-top: 80px;
margin-left: 80px;
position: absolute;
color: rgb(237, 237, 237)
}
.conditions{
width: 100px;
height: 30px;
margin-top: 40px;
margin-left: 60px;
position: absolute;
}
.weather-description{
margin-left: 59px;
margin-top: 30px;
margin-bottom: 50px;
position: absolute;
}
.wind {
width: 100%;
margin-left: 30px;
position: relative;
font-size: 14px;
}
.wind::after {
display: block;
content: '\f050';
font-family: weathericons;
font-size: 25px;
margin-left: 75px;
position: absolute;
bottom: -26px;
}
<body id="body">
<div id="weather_wrapper">
<div class="weatherCard">
<div class="currentTemp">
<p class = "help">Click on the temp to change units</p>
<p class="location"></p>
<p class="temp"></p>
</div>
<div class="currentWeather">
<span class = "weather-description"></span>
<span class="conditions"></span>
<div class="info">
<span class="rain"></span>
<span class="wind"></span>
</div>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src="app.js"></script>
</body>