Used sass and flexbox. Implemented BEM

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  Hey Safa, nice work on this challenge! I always use min-width media queries instead of max-width. It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and has the benefit of loading in fewer styles for mobile users, which can be a nice performance gain. I'll then use rem units for properties like font-size, padding, margin so that everything scales proportionally when you change the font-size value on the html element for different screen sizes.

  I find it to be a really nice approach for writing maintainable styles for responsive sites. I hope this helps. Let me know if you have any more questions! 🙂

  2

  ---

  

  Safa Ruknuddin•385

  @safrukPosted over 4 years ago

  @mattstuddert I finally tried min-width queries in the newbie single price grid component challenge :). It made me approach the design in a much more simplified way.

  0
• 

  Shubham Sharma•855

  @shubhamthedevPosted over 4 years ago

  Hi, here are some of the answers to your questions:

  • For me i usually change the font sizes for the paragraphs on different screen sizes and in combination with width attribute it seems to work fine for me.

  • I'll be honest but i have never used flex-wrap ever but you could see a small example of how it maybe useful over here.

  • You could use a shorthand background: #ffffff url("img_tree.png") no-repeat right top; and put both the background-image and background-color on the body element,this worked for me.

  Hope this helps.

  2

  ---

  

  Safa Ruknuddin•385

  @safrukPosted over 4 years ago

  @tomboynotes Yeah I do the same for font sizes along with width because I can't figure out the right amount of padding/margin most times

  Looking at your example it looks as though flex wrap works best when you have same type of items with their content occupying same width. Thanks! Atleast now I won't try to use flex wrap everywhere inside flex container because I always fail.

  The background shorthand I frequently use. If you look minutely at this design there's the background image only on header in mobile site. Anyways thanks for your feedback! Appreciate it. Really glad you looked into the solution. Thanks!

  1