qr code component main

Community feedback

• 

  Julien Kombora•230

  @JulienK94Posted over 2 years ago

  i don't want to give you the answer but here the element you're working on is central in a body. so to center it you need to set the height of the body (height: 100vh; /vh meaning here viewport height) after that you set display:flex on the element containing pic and text and try to align it. just do some research. i don't speak english very well so be cool. wish you the best

  0

  ---

  

  Wuanma•100

  @wuanmPosted over 2 years ago

  @JulienK94 Thanks for your comment. What puzzles me in this activity is that I inspect the activity, check its measurements and they all give me according to the support material. only the card is distorted when you enter 300px. at 375px the card respec.ts my measurements, inspected on the laptop. In my previous activities I only used "%", in this one I started using "vw" and "vh" to give the measurements. and I did not understand what happened, why? The card came out distorted

  0

  

  Julien Kombora•230

  @JulienK94Posted over 2 years ago

  @wuanm the vh is just for the body, it allows you to align the container of content vertically at the center of the page . % continue to use them with things like Widths.

  • set the body like that : body { min-height: 100vh; /* allows to align vertically with flex*/ width: 100%; /* allows to align horizontally with flex*/ display: flex; justify-content: center; /aligns vertically with the helps of width 100%/ align-items: center; /aligns vertically with the helps of min-height 100vh/ }

  main { width: 60%;} /the container of the image and text will be 60% of its parent body 100%/

  wish you the best happy coding . for help on css flexbox watch travesty media channel on youtube name of the video (css flexbox crash course 2022 ) . you're welcome

  0

  

  Wuanma•100

  @wuanmPosted over 2 years ago

  @JulienK94

  Thanks. I will review the video.

  1