QR Code Component

Community feedback

• 

  Pipow•500

  @PipouwPieuwPosted almost 2 years ago

  Hey there!

  First of all, well done for completing this challenge! Your page looks great and is very similar to the design.

  You asked for feedback about your CSS so here are a few things I would improve:

  • Setting fixed width and height is a quick and easy way to build precise layouts but it also makes your elements less flexible. For example if you need to change the text by making it shorter or longer, you'd want the block to adapt its height accordingly which is not the case here. But I understand you needed to use fixed height and width because you centered your block using an absolute position, which brings me to my next point:

  • Maybe look into flexbox instead :) It may be a bit hard to understand at first but it's essential to know how to use it I think. It makes centering elements very easy. Here's an example.

  • You also set fixed values to size your image. Instead, you could use max-width: 100% so it will never get larger than its parent and it could still shrink if necessary. Then you can set its height proportionnally with height: auto. This means that no matter how wide the image is it will always keep its aspect ratio.

  • I noticed the use of this media query @media screen and (min-width:376px) and (max-width:1920px). This means that for resolutions greater than 1920px none of the styles it contains will apply. In this case if you simulate a very large screen you'll see the QR code box is not centered anymore, it just hangs to the left. Removing and (max-width:1920px) would fix this.

  I hope I'm making sense. If you have further questions don't hesitate to ask :)

  Well done and keep going!

  Marked as helpful

  1

  ---

  

  Clément Bartholomé•60

  @ClementBartholomePosted almost 2 years ago

  @PipouwPieuw Thanks a lot for this feedback, it's really helping ! I'll try doing it with flexbox :)

  0