no flexbox, grid or positioning utilized.

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  Set a width 100% but also a max width in rem on the card. That stops it growing too large.

  Use rem for font size, never px.

  Make sure the wrapper (eg body) has a little padding to stop content hitting the sides of the screen

  This looks pretty good overall. The onky thing that definitely needs changing in the html is the image alt text. This is not good "image-qr-code" because it is not readable, it's been written like it's code when this should be a normal written string of text just like any other visible content would be. It should describe the image briefly and should not include words like "image" because it is already on an image tag. For this image, I would recommend alt text say something like "QR code to frontendmentor.io"

  0
• 

  jack fikolson aka frontfliper•145

  @areklazPosted over 2 years ago

  Why do you want to center it without flex? It's the simplest way.

  The best practice is basically using responsive units like rem, em or %. But it doesn't mean you can't use px at all. Try to use rems as font-size and margin/padding just like you (almost) did here.

  0

  ---

  

  Jason Lee•10

  @JLee2011Posted over 2 years ago

  @areklaz Thanks for replying. Without flex just because the course I am taking has not yet covered this theme.

  The original margins I used were in % but when the browser window was resized then the rendered card was so huge that the qr-code-img size would exceed the viewport.

  0
• 

  Ahmed Ouni•60

  @midoox01Posted over 2 years ago

  Working with % is better for responsive designs for fonts there is em and rem you should check out this tutorial to better understand responsive design. https://www.youtube.com/watch?v=srvUrASNj0s&ab_channel=freeCodeCamp.org

  0