Used ONLY GRID layout to align the cards

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hello

  You need to change the heading levels on this and get the sizes closer to the design

  Looking at the css, you should remove all position absolute and transforms I think. These aren’t good approaches for this layout and are making everything unnecessarily complicated for you.

  There’s a lot of repeating css in this. Remember elements can have multiple classes, so the shared styles on cards can be handled by one class.

  I also don’t understand what’s going on with the media queries in this tbh. It’s highly unusual to have min and max width media queries in use like this. It’s like you’re overwriting your own styles in places…. Best practice is to have mobile styles as the base, then add min width media queries as needed for larger and larger screens in order.

  Marked as helpful

  0

  ---

  

  Praneeth Tatikonda•200

  @TSPraneethPosted over 3 years ago

  @grace-snow I've used position and transform only to get the elements to the center of the screen in larger screens, is it a better option to give width and use margin auto to place it to the center? And I'll look into the other ways to improve too.. thank you

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  It would always be better to use max-width on child and either grid or flexbox properties on the parent to center

  0
• 

  Mojtaba Mosavi•3,760

  @MojtabaMosaviPosted over 3 years ago

  Hi, the mobile and desktop view look quite good, between 700px up to 1000px you've got some horisontel scrolling. There are two solutions in my opinion:

  1- Having the mobile styles up to 1000px and then switching to desktop styles.

  2- Restyling by defining another media query, which I don't recomand because it's not good practice.

  Keep coding :)

  Marked as helpful

  0

  ---

  

  Praneeth Tatikonda•200

  @TSPraneethPosted over 3 years ago

  @MojtabaMosavi thank you, I'll look into that

  0