QR code component

Community feedback

• 

  Rahul Kumar Ravi•430

  @its-rkraviPosted over 1 year ago

  Congratulations @spectrxtt for completing the challenge.

  Welcome to the Frontend Mentor Platform. I want to give you some feedback regarding your code. Inside the style.css file you write a lot of CSS properties which I think not needed. Your design is not responsive for mobile screen.

  Below, I tell you how to make it responsive for mobile screens.

  Note:

  What we want is whatever written inside the body tag or most specifically we want to center our QR code component.

  here is the code what you write inside the body tag.

  body{
      background-color: var(--clr-Light-gray);
      max-height: 100%;  
      // here instead of 100% you need to give height of 100vh or whatever the height  mention 
      // in the desktop design screenshot.
      display: flex;
      flex-direction: column;  // no need this property  also.
      align-items: center;
      justify-content: center;
      padding: 3rem;   // you don't need to write padding here.
      text-align: center;   // yes we need this because we want our text  in center.
  }
  

  .back {
      width: 300px;  
      // instead of only width you can use max-width that's why your design not responsive for  
      // small screens. so please change width to max-width. 
      height: 440px;
      // instead of only height you can use min-height that's why your design not responsive 
      //for small screens. so please change height to min-height.
      // NOTE:
      //  if you don't want to change height then no problem it works fine.
      display: flex;
      margin: 0;  
       // I think you don't need this property but you can use this for adjust your component  so  
       // that it looks like original one. 
      background-color: var(--clr-white);
      border-radius: 1.5rem;
      position: relative;  // I don't know why you write this property.
  }
  

  Few Tip:

  Using Flexbox or Grid to center elements can offer several advantages, including better responsiveness, cleaner code, and improved compatibility. Additionally, it promotes the adoption of best practices in web development.

  Use more modern and flexible techniques like Flexbox or Grid for layout purposes. These CSS features are designed to make web development easier, more maintainable, and responsive across various devices.

  I hope you find this feedback helpful.

  Keep up the excellent work, and if you have any further questions or need assistance with anything, feel free to ask.

  Mail : [email protected]

  Instagram : its_rkravi

  Together, we can continue to build a supportive and knowledgeable community.

  Best regards, Rahul Kumar Ravi

  Happy Coding!

  Marked as helpful

  0