Responsive mobile barcode using basic html and css properties

Community feedback

• 

  Francesco•270

  @FraCav99Posted about 2 years ago

  Hi, Oyetunji!

  To remove the scroll bar on small screen, remove the margin from the top-container element class. You can use grid or flexbox for center elements on the page, in this case:

  body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  or with flexbox:

  body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  Also, the body background color is this hsl(212, 45%, 89%)

  Hope this can help you! Happy coding! :D

  Marked as helpful

  2

  ---

  

  Oyetunji Johnson Remilekun•210

  @JohnsonjrfPosted about 2 years ago

  @FraCav99 Thank you so much for the corrections you made. i look forward to more insights from you

  0
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hello Oyetunji Johnson Remilekun,

  Congratulation on completing this challenge.

  Excellent work! I see you have received some incredible feedback . I have few suggestions regarding your solution, if you don't mind:

  • Use <main> landmark to wrap the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

  • Page should contain <h1>. In this challenge , as it’s supposed to be a part of a whole page, you may use<h1>with sr-only class hidden visually and present for assistive tech users.

  The commented rules has to be removed
  /*small reset */
  *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  body {
      /* margin: 0; */
      /* padding: 0; */
      background-color: hsl(220, 15%, 55%);
      /* box-sizing: border-box; */
      text-align: center;
      font-family: 'Outfit', sans-serif;
      display: flex;/*Using flexbox properties to center the component */
      align-items: center;
      justify-content: center;
      min-height: 100vh; /*To that let the body grows taller if the content of the page outgrows the visible page*/
      width: 100%;
  }
  /*It' an unnecessary div , so you can remove the styles.*/
  .top-container {
      /* width: 100%; */
      /* height: 80%; */
      /* background-color: hsl(220, 15%, 55%); */
      /* margin: auto; */
      /* padding: 0; */
      /* box-sizing: border-box; */
      /* margin: 100px 0; */
      /* font-weight: 700; */
  }
  .small-container {
      max-width: 300px;/*Consider using **max-width** instead in rem, as an explicit width is not really a good way to have responsive layout.*/
      /* height: 500px; *//*It's not recommended to set height to component, let the content of the component define the height */
      padding: 1rem;
      color: white;
      border: 1px solid white;
      margin: auto;
      background-color: white;
      border-radius: 10px;
      /*border-style: none;*/
      /* position: relative; */
  }
  /*There's no need for the absolute positioning*/
  img {
      width: 100%;
      display: block;
      /* height: 60%; */
      /* position: absolute; */
      /* top: 7px; */
      /* left: 7px; */
      border-radius: 10px;
  }
  .text {
      color: black;
      /* position: absolute; */
      /* bottom: 16px; */
      /* left: 31px; */
     /* margin: 0 auto;*/
      /* width: 80%; */
      margin: 1rem 0;
      text-align: center;
  }
  

  • Images must have alt attribute. In my opinion, the image is an important content. The alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor not describes the image.

  • Consider using rem and em units as they are flexible, specially for font size better to use rem. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

  • You have used <br> , using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element. This can be a confusing and frustrating experience for the person using the screen reader. You can read more in MDN

  • Do not use <br> to create margins between paragraphs, wrap them in <p> elements and use the CSS margin property to control their size.

  Overall, Your solution looks great. Hopefully this feedback helps.

  Marked as helpful

  1

  ---

  

  Oyetunji Johnson Remilekun•210

  @JohnsonjrfPosted about 2 years ago

  @PhoenixDev22 Thank you so much for the corrections you made. i look forward to more insights from you.

  0
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Oyetunji Johnson, congratulations for your new solution!

  To be right to the point and answer your question about the viewportheight:

  The property that you've asked in your question is min-height: 100vh; that will make sure your body will 100% of screen height. This way a scrollbar will be not created.

  See the changes I've add to your code:

  body {
      min-height: 100vh;
      padding: 0;
      background-color: hsl(220deg 49% 88%);
      box-sizing: border-box;
      text-align: center;
      font-family: 'Outfit', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  Don't forget to remove these margins to make the body have a correct align:

  .top-container {
      /* width: 100%; */
      /* height: 80%; */
      background-color: hsl(220, 15%, 55%);
      /* margin: auto; */
      /* padding: 0; */
      box-sizing: border-box;
      /* margin: 100px 0; */
      font-weight: 700;
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Oyetunji Johnson Remilekun•210

  @JohnsonjrfPosted about 2 years ago

  @correlucas Thank you so much for the corrections you made. i look forward to more insights from you.

  0