Designing QR Component with HTML and CSS

Community feedback

• 

  Fabianthorsen•170

  @FabianthorsenPosted over 1 year ago

  Hey, great work! For this solution you don't really need to use media queries, but if you would like to understand how they work and their syntax it is very simple:

  @media screen and (min-width: 600px) {
      // Logic that should override the css when browser window is larger than 600px
  }
  

  For the above example everything we put inside the "curlies" would only apply once the browser window meets the condition we set inside the parentheses. If for example we had some class with a height of 100px like so

  .some-class {
      height: 100px
  }
  

  This object would be 100px no matter the screen size, i.e. non-responsive. However if we want it to become 200px if our screen size increases above 500px we could make a media-query like so:

  @media screen and (min-width: 500px) {
      .some-class {
          height: 200px
      }
  }
  

  This would make it so that it changes once the browser window is larger than 500px. Hope this made some sense, if not you should read this article on responsive web. Hope this helped!

  2
• 

  eve•230

  @Eve-WangariPosted over 1 year ago

  Hello, congratulations for finishing the challenge. I found this video really helpful to understand media queries. Might come in handy for future projects. Happy coding. Here's a link https://www.youtube.com/watch?v=ZYV6dYtz4HA&t=1s

  1
• 

  Bernardus•1,095

  @BernardusPHPosted over 1 year ago

  Hey ALEXIS DAVID QUIZHPE MENDOZA.

  I see that you are hard coding the width of the card to 280px so even if you use min-width or max-width it would do nothing since your card will stay at 280px. You could leave it at 280px which is fine but if the screen gets smaller you can add something like this:

  @media(max-width:400px)///you can tweak this
  .card{
  width:80%;
  max-width:400px;
  min-width:300px;
  }
  

  This is just an example but this will change the width of the card to 80% of the parent container but it will not get bigger than 400px and not get smaller than 300px at 400px screen size or less

  I would recommend using clamp here. clamp can be used when want a min-max setting but want to work in between the min and max. Sorry for the terrible explanation but here is an example: width:clamp(500px,80%,700px) Here the item will be 80% the parent's width but it cant be greater than 700px or smaller than 500px this helps when resizing the screen.

  Please don't use a div as a landmark without reason(like a framework). What I mean is, the DIRECT children of the body. There are a few landmarks like

  • nav
  • main
  • footer
  • aside etc.

  For your project I would just replace the direct children of the body into main since you just have a card. The reason for this is for the developers so we don't get easily lost in the code and also screen readers use the landmarks.

  I see that you did not add a box-sizing:border-box; to your * like:

  *{
  box-sizing:border-box; 
  }
  

  This makes working with margin and padding easier as they wont increase the width of your containers easily.

  Also I dont see a min-height:100dvh/vh on the body use min-height:100vh and min-height:100dvh the min-height makes your body's height as big as the screen but it can then increase based on the content. The dvh is for more responsiveness but put the vh before this as some browsers cant read dvh. And you dont have to put that margin-top on the card then because the height of the body will align the card in the center now with the help of the flex code you have.

  body{
  min-height:100vh;
  min-height:100dvh;
  }
  

  Hope this helped.

  1