@Fabianthorsen
Posted
Hey, great work! For this solution you don't really need to use media queries, but if you would like to understand how they work and their syntax it is very simple:
@media screen and (min-width: 600px) {
// Logic that should override the css when browser window is larger than 600px
}
For the above example everything we put inside the "curlies" would only apply once the browser window meets the condition we set inside the parentheses. If for example we had some class with a height of 100px like so
.some-class {
height: 100px
}
This object would be 100px no matter the screen size, i.e. non-responsive. However if we want it to become 200px if our screen size increases above 500px we could make a media-query like so:
@media screen and (min-width: 500px) {
.some-class {
height: 200px
}
}
This would make it so that it changes once the browser window is larger than 500px. Hope this made some sense, if not you should read this article on responsive web. Hope this helped!