Responsive QR Code website using Bootstrap and Flex

Community feedback

• 

  Nada Cantika•30

  @acaxoxoPosted 4 months ago

  so cool!

  1
• 

  Lemnsa•110

  @LemnsaPosted 4 months ago

  Congratulations @gabriel-iturra completing this project

  Using both clamp() and media-queries help with achieving responsive design. They are just twins who have their own roles to play.

  Which is better?

  clamp() is better when:

  You want a single rule that adjusts smoothly across a range of screen sizes. It's great for responsive typography or scaling elements based on viewport size(like font size, margin, padding, etc.).

  example: font-size:clamp(16px, 2vw, 24px);

  Which means the font size will be at least 16px, but grow as the viewport width (vw) increases, capped at 24px.

  Media queries are better when:

  You need to make more significant layout changes or apply different styles based on specific device characteristics (like orientation or resolution). They offer more control over how your content adapts to different devices.

  example:

  * CSS for screens wider than 600 pixels *
  @media screen and (min-width: 600px) {
    body {
      background-color: lightblue;
    }
  }
  
  * CSS for screens narrower than 600 pixels *
  @media screen and (max-width: 600px) {
    body {
      background-color: lightgreen;
    }
  }
  

  These media queries allow you to customize how elements on your webpage look based on the width of the screen.

  So, you can then see that based on this information Media queries will help you reach your goals of different layouts on screens of different sizes.

  Always do more research if the concept is not clear yet!

  0