QR Code Component

Community feedback

• 

  Sarah Arvin•80

  @Sarah-C-Arvin

  Posted about 3 years ago

  I would recommend using the "mobile first" approach for literally every project you ever do. That's what I learned in the classes I took, anyway! It's much easier to progressively increase the size of your layout, than it is to try to fit all your content on a smaller screen if it's designed for desktop.

  Instead of putting your mobile styles and measurements in your media query, design everything for the mobile design first, and then use a media query to tweak anything that needs tweaked for desktop.

  This is a practice site I did in my class I took when we learned about responsive design, and I think it's a really good example of the mobile-first approach and media query use: https://github.com/Sarah-C-Arvin/Unplugged-retreat

  Hope that helps! Keep up the good work!

  22

  Marked as helpful
• 

  CyrusKabir•1,885

  @CyrusKabir

  Posted about 3 years ago

  Hello my dear friend ♥ you did good on this challenge and here some tips for your code and result :

  • first, don't use id for css styles if you ask why? here is some good links and try to read them one after another : first: Specificity in css, second: reasons not to use IDs in css
  • actually, you don't need to change size of a pic or image with @media or any other ways, instead you can make an img tag completely responsive with just some few lines like this : img {max-width: 100%; display: block} with this you can have the guarantee the size of your pic or qr-img here for example never get more than it's container width
  • also you can check this good mini course in web.dev about responsive design in different concepts typo, images, ..... Learn Responsive Design

  02

  Marked as helpful