@md5dalton
Posted
Hello Guilherme Lopes π
Congratulations on finishing this challenge. Impressive work π
βοΈ Mobile First
You may have heard of this before but if not, this just means creating a layout where the default configuration is for narrow screen/mobile devices, and layout features for wider viewports are then layered on top of that default.
To address your question, we will not be creating media queries for mobile since in mobile first approach, we assume that all your default styles are targeted to mobile screen sizes, then we are going to create media queries to define styles for bigger screen devices. Below are some examples I've used and please note that you can modify the breakpoints to meet your project design.
.container {
display: grid;
...
}
/* Tablets */
@media (min-width: 576px) {
.container {
grid-template-columns: 1fr 1fr;
...
}
}
/* Desktops */
@media (min-width: 1024px) {
.container {
grid-template-columns: repeat(4, 1fr);
...
}
}
This is just an example and you may have noticed that I used min-width
instead of max-width
; this is a typical pattern in mobile first approach.
Cheersπ
Marked as helpful
@gguilhermelopes
Posted
@md5dalton Thanks for the tips! In my next challenge I'll try to use Mobile First. See ya!