Qr Code Using Css Margin and padding

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted over 2 years ago

  Hi

  This doesn't look like the design yet and needs some work. Below are changes I made in browser with some notes.

  I strongly recommend you

  • use a modern css reset
  • learn more about html structure and semantics
  • learn modern css techniques. Sites like Modern CSS by Steph Eckles, content by Andy Bell and Heydon Pickering etc will help
  • Use grid/flexbox
  • Ask specific questions when you are building solutions and you struggle to make them look like the designs - seek out the advice. And share specific questions / learning focus when you post solutions to encourage more feedback.
  • Don't jump ahead until you've done lots more small challenges like these

  
  /* styling.css | https://frontendmentorqrchallenge.netlify.app/Css/styling.css */
  
  .container {
    /* margin-left: 37%; */
    /* margin-top: 15%; */
    /* padding: 20px; */
    /* width: 300px; */
    /* height: 470px; */
    max-width: 22rem;
    padding: 1.2rem;
    note: Box shadow does not look like design;
    margin: 1rem;
    text-align: center;
  }
  
  .qrcontainer img {
    /* width: 300px; */
    /* height: 300px; */
    max-width: 100%;
    display: block;  // part of standard reset
    note: Alt text. QR code to where???;
  }
  
  .textcon {
    /* text-align: center; */ 
    note: where is font size and line height?;
    note: why is the heading a h3?
    note: take control of vertical margin, dont rely on browser default styles;
  }
  
  .textcon p {
    margin-bottom: 0;
  }
  
  body {
    note: Use a CSS reset ! A modern basic one would suffice;
    // center the card on the viewport:
    min-height: 100vh;
    display: grid;
    place-content: center;
    margin: 0; // part of a standard reset
  }
  
  h3 {
    note: DO not use brs to create line breaks ! Line length is already controlled by max-width on the card;
  }
  

  0

  ---

  

  A.Tech Services•100

  @A-Tech-ServicesPosted over 2 years ago

  @grace-snow Thanks for this i wish someone can actually be dropping feed back for me

  0