Product preview with Grid

Community feedback

• 

  ‪Bilal Salmi‬‏•250

  @BilalSalmiPosted almost 2 years ago

  Hi Gilbert, well done!

  Your design is already responssive, all you need to do to optimize it is to modify the div with class named ".card-wrapper". it will be prefectly centered!

  .card-wrapper { background: var(--white); border-radius: 10px; display: grid; grid-template-rows: 1fr 2fr; grid-template-columns: 1fr; width: 344px; height: 600px; margin: auto; margin-top: 10px; margin-bottom: 20px; /* margin: 30px 15px 10px 15px; */ }

  you forget to set margin to "auto".

  To fix your Accessibility report issues consider to read more about the following topic which is as follows:

  • Html semantic elements click

  That is, Keep going!

  Marked as helpful

  1

  ---

  

  Gilbert Tan•150

  @gbtan1991Posted almost 2 years ago

  @BilalSalmi Thank you for your guide. Now it's centered on every type of device. Also, the Accessibility report was done I've changed some div to semantic tags. Thanks again

  0

  

  ‪Bilal Salmi‬‏•250

  @BilalSalmiPosted almost 2 years ago

  @gbtan1991 No at all ! I'm happy to see the result .

  You may wanna dig deeper into responsiveness & alignment:

  • responsiveness.

  • Alignment.

  0