Responsive product card using CSS Flexbox

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Great topic of discussion. I do mobile first, even though it took me a while to get to that mindset. When I first started learning web dev, it was desktop view first and then mobile; I'm guessing it's because most of the learning and teaching are done on a desktop computer, and so it might make more sense to teach desktop view, but I do find that teachers who are more design/CSS conscious tend to do mobile first. The mobile-first approach is so much easier because generally it's just easier to start small; with desktop views, there tends to be more complex variations. I highly recommend resources from Gary Simon and Kevin Powell (his "5 simple tips to making responsive layouts" video is worth checking out).

  Marked as helpful

  2

  ---

  

  Aaron•40

  @aaronhashPosted over 2 years ago

  @elaineleung Hi Elaine! Yes! All popular tutorials were starting on desktop view then mobile, but this project made me think about my process. Thanks for your input and shared resources! Will definitely try mobile first for my next responsive project. Appreciate it! ❤️

  1
• 

  LrnceDev•40

  @lrncedevPosted over 2 years ago

  Your work is great. Sheesh. Regarding your question, i use mobile-first approach. The styles outside the media query are the global styles. In the media query then i will just change it if it needed to. (Got this work flow from the CSS God himself, Kevin Powell).

  Marked as helpful

  0

  ---

  

  Aaron•40

  @aaronhashPosted over 2 years ago

  @lrncedev Nice! I'll try that for the next project. Thank you!

  0