Product preview card component solution

Community feedback

• 

  yishak abrham•2,150

  @yishak621Posted about 2 years ago

  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; 
   }
  

  1

  ---

  

  Vladimir•170

  @D0vl4Posted about 2 years ago

  @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!

  0

  

  yishak abrham•2,150

  @yishak621Posted about 2 years ago

  @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

  0