QR code component made with Flexbox, media query for mobile viewing

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @nachtwurst, congratulations for your new solution!

  🎯 Your solution its almost done and I’ve some tips to help you to improve it:

  1.You’ve used <div> to wrap the card container, in this case you need to use <main> since this is the main block of this page.

  2.Every page needs a main heading, the <h1> to show which is the most important heading. You need to increase the headings by one level, like h1, h2, h3 to show the titles hierarchy. Remember that you cannot have more than one h1 heading.

  3.Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.

  4.Its ever better to use relative units as rem or em that have a better fit if you want your site more accessible between different screen sizes and devices. REM and EM does not just apply to font size, but to all sizes as well.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  nachtwurst•40

  @nachtwurstPosted about 2 years ago

  @correlucas Thank you for your help! I've updated the project files to implement your suggestions.

  0
• 

  Jacob Marshall•270

  @JacobMarshall0Posted about 2 years ago

  Hey nachtwurst, good job on this project, your design looks great on both mobile and desktop.

  Typically in an @media query you only include the classes and attributes you want to change. So for instance if you wanted to change the box-shadow for the container, in your media query you would have .main_container with just a new value for the box-shadow design, instead of everything again.

  This is a useful resource for learning more about them, and applying them to more advanced projects.

  Keep up the good work!

  Marked as helpful

  1

  ---

  

  nachtwurst•40

  @nachtwurstPosted about 2 years ago

  @JacobMarshall0 Thanks! I've updated my project and removed all the excess I had under the @media queries.

  1
• 

  Laharl•1,000

  @UrbanskiDevPosted about 2 years ago

  Hello nachtwurst !

  Congratulation for finishing this challenge

  There's not a specific method to know what specific value to put in your media query, but to help you out, I would start by building my page using the mobile design (building a project this way is called "Mobile First"). You start by building your page with the smallest screen, then when you have finished, you can continue with a superior size screen. You will be able to see more easily if your layout works well or not, and adjust your media queries more easily !

  Good job, keep going and I hope my answer helps you !

  Marked as helpful

  1
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @nachtwurst,

  Congrats on completing the challenge to give you an answer you're using it kind of incorrectly I understand what you're doing but you just need to add the CSS rules that you want to change for example let say you have the following rules in you CSS file:

  body {
     background: blue;
     color: #fff;
  }
  
  .heading {
      font-size; 70px;
  }
  
  a {
     text-decoration: none;
  }
  

  but now on mobile screens the 70px heading is way to big so that's when you want to write a media query to change just he the size of the .heading for mobile for example. @media (max-width: 640px) { .heading { font-size: 30px; } }

  because all the other stuff looks fine on mobile you only want to fix what is broken or this not look right on mobile. This can be an entire CSS rule or just one declaration in a rule and for that you won't copy all the declaration in that rule jus the one that you want or needs to change.

  Hope this is helpful, let me know if you have any other questions.

  Marked as helpful

  1

  ---

  

  nachtwurst•40

  @nachtwurstPosted about 2 years ago

  @hyrongennike I've updated the project files to remove the extraneous CSS under the @media queries. Thanks for your help!

  0