FrontEnd Mentor First-challenge QR Code Component WITH HTML & CSS

Community feedback

• 

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted 6 months ago

  Hey ! Great work out there i just notice that you are using position and its related properties with transfrom-translate css properties in order to center the qr code component , i suggest that you can use display properties such as grid or flex much easier and less code if you want to center something. that's all happy coding !

  .container {
    background-color: hsl(212, 45%, 89%);
    width: 100vw;
    height: 100vh; // you are correct adding this height since it is very important especially when you want to position a element but i recommend min-height to avoid some issue like overflowing content when the content reach 100vh.
    margin: 0;
    position: relative; you can remove this
    display: grid;// add this
    place-content: center; // add this
  }
  

  .holder {
    width: 330px;
    height: 480px;
    background-color: hsl(0, 0%, 100%);
    position: absolute;you can remove this
    top: 50%;you can remove this
    left: 50%;you can remove this
    transform: translate(-50%,-50%);you can remove this
    border-radius: 4%;
    box-sizing: border-box;
  }
  

  Marked as helpful

  0
• 

  ABDELALI AIT TALB•40

  @Raxel01Posted 6 months ago

  very cool, nice work as you say it's a simple challenge but for beginners may like me it's a big challenge.

  0
• 

  Nwankwoala Bishop Joel•330

  @KushpapyPosted 6 months ago

  Great Work, I really like how everything came out perfectly.

  0