@yishak621
Posted
Holla vladmir congrats for completing the challenge but for the responsive design part u should write a media query ...just like these
@media screen and (min-width: 750px) {
.center {
margin: auto;
}
/*for pc version 2 columns and 1 rows*/
.container {
display: grid;
grid-template-columns: repeat(2, 20rem);
grid-template-rows: 37rem;
overflow: hidden;
border-radius: 10px;
column-gap: 0;
}```
And for mobile version
```css
.container {
display: grid;
grid-template-columns: 25rem;
grid-template-rows: 28rem 30rem;
overflow: hidden;
border-radius: 10px;
}
@D0vl4
Posted
@yishak621 thank you for the kind words, I will study your code and give it a shot! :) I have a question tho.. should I write media query for every class/id separate or should I write one for all classes/id's? Thank you in advance!
@yishak621
Posted
@D0vl4 the purpose of media query is to put the changes for a different screen sizes so if u do not want to change that specific element u don't have to write for media query...in these example the grid is 1x2 1row with 2column for large screens and 2x1 2row with 1column for mobile screen...so the grid container needs a media query and also the image is provided in 2 formats if u check the folder so 1x image and 2x image so when the grid pattern change the image u provide must be changed too
Marked as helpful
