Single Price Grid Component Challenge using HTML + CSS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi! 👋

  I would recommend writing the CSS for the mobile layout first and then using min-width media queries to style larger screen sizes (if needed). I recommend this approach because the mobile layout is commonly simple which is what the default styling (block elements) already has (like one column layout). So, with min-width media queries you can add complexity to the layout.

  Also, the mobile-first approach often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.

  By using the desktop-first approach, you have to overwrite the grid or the flexbox layout (make everything into one column again). So, I suggest keeping writing the CSS with the mobile-first approach. 🙂

  As far as improvements for this project, I would recommend reducing the size of the card. If you see the design comparison, you will notice that the card element is not filling the entire page.

  Also, don't forget to fix all the issues that have been generated. 😉

  That's it! I hope this information is useful! 😁

  Marked as helpful

  2