Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Adrian Mindak
Courses Plus Student 10,877 PointsHey, I hope somebody can help me. My Sass media queries are only working with an important statement.
Hey treehouse,
I started a small Calculator app like the one Apple has on all their devices and now my media queries are not working.
At the bottom of the following sass file is a query where I was testing whether the borders of my buttons will turn red on landscape mode. But they didn't. I always need to add the important statement to get the media query to work.
/**********************************
SCSS FOR SmartPhones in Portrait view
**********************************/
.calculatorBody{
height: 100%;
width: 100%;
display:grid;
grid-template-rows: 2fr 5fr;
grid-template-columns: 1fr;
background-color: $white;
overflow: hidden;
font-family: $font-stack-prim;
}
.viewport{
grid-row: 1 / 2;
grid-column: 1 / 2;
background-color: #1A1A1A;
.display{
display: flex;
justify-content: flex-end;
align-items: center;
overflow: hidden;
padding: 5% 5% 1% 5%;
height: 100%;
font-size: 3em;
color: $white;
}
}
.keyboard{
grid-row: 2 / 3;
grid-column: 1 / 2;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
button{
@include centerContent;
display: inline-block;
padding: 0;
margin: 0;
transition: all .1s ease-in-out;
font-size: 30px;
&:hover{
transform: scale(1.02);
cursor: pointer;
}
&:active{
transform: scale(0.97);
cursor: pointer;
}
&[size="2"]{
grid-column: 1 / 3;
}
}
.classic-calc{
grid-row: 1 / 2;
grid-column: 1 / 2;
display: grid;
grid-template-rows: repeat(5, 1fr);
grid-template-columns: repeat(4, 1fr);
.cmd-operators {
grid-row: 1 / 2;
grid-column: 1 / 4;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(3, 1fr);
.cmd-operator {
border: solid rgb(162,162,162) .25px;
color: $dark-grey;
background-color: rgb(214,214,214);
}
}
.math-operators {
grid-row: 1 / 6;
grid-column: 4 / 5;
display: grid;
grid-template-rows: repeat(5, 1fr);
grid-template-columns: 1fr;
.math-operator {
border: solid rgb(162,162,162) .25px;
color: $dark-grey;
background-color: rgb(245,146,62);
}
}
.digits {
grid-row: 2 / 6;
grid-column: 1 / 4;
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: repeat(3, 1fr);
.digit {
border: solid rgb(162,162,162) .25px;
color: $dark-grey;
background-color: rgb(224,224,224);
}
}
}
}
.landscape {
display: none;
}
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
button {
border: solid red .25px !important;
}
.keyboad{
grid-template-rows: 1fr;
grid-template-columns: 3fr 2fr;
}
.classic-calc {
grid-row: 1 / 2;
grid-column: 2 / 3;
display: none;
}
.landscape{
grid-row: 1 / 2;
grid-column: 1 / 2;
display: grid;
grid-template-rows: repeat(5, 1fr);
grid-template-columns: repeat(6, 1fr);
}
}
I created this calulator to get some experiance with css grid and now I am not able to create a landscape view.
It is a react app. I am using webpack 2 and autoprefixer if this is nessasary. This hole app structure is based on a boilerplate from Stanko - https://github.com/Stanko/react-redux-webpack2-boilerplate.
Thx for the help !!!!!!
1 Answer
Konrad Traczyk
22,287 PointsHello Adrian,
Based on code you provided, Im pretty sure you have too weak selector in your media query. You use "@include centerContent;" which probably sets border already with ".keyboard button " selector, while you have only "button" seletor in your media query.
Try something like
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
div.keyboad{
grid-template-rows: 1fr;
grid-template-columns: 3fr 2fr;
button {
border: solid red .25px;
}
}
.classic-calc {
grid-row: 1 / 2;
grid-column: 2 / 3;
display: none;
}
.landscape{
grid-row: 1 / 2;
grid-column: 1 / 2;
display: grid;
grid-template-rows: repeat(5, 1fr);
grid-template-columns: repeat(6, 1fr);
}
}
Dunno if .keyboard is actually div, but i believe you gonna change this to appropriate if it doesnt.
Hope it Helps.
Adrian Mindak
Courses Plus Student 10,877 PointsAdrian Mindak
Courses Plus Student 10,877 PointsThx so much - I didn't know how less I knew about selectors in CSS. Thx, to your answer and some lessons about CSS selectors on treehouse ... I now have not a single "!important" statement in my code :D.