barcode using html css

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 12 months ago

  Hello @asadalimcj!

  Display: Block = The element uses 100% of the parent element's width. You can set its height and width.

  Display: Inline = The element behaves like a word. You can place other elements next to it because it doesn't use 100% of the parent element's width. In this case, you can't set it's height or width.

  Display: Inline-Block = The element behaves like a word, does not use 100% of the parent element's width but you can set it's height and width.

  It's not that hard. With practice, you're gonna master it very soon.

  1
• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 12 months ago

  HTML:

  • You need a <main>, this is important for accessibility. Change <div class="main"> into something like <main class="card">.

  • You don't need any divs at all in this challenge. So, I would remove them.

  • The image must have alt text. This is essential for screen readers to understand the image. The alt text should be descriptive, and in this example, it also needs to say where it leads (frontendmentor.io).

  CSS:

  • It's good practice to include a CSS Reset at the top.

  • It seems you only have font-weight of 200 included - go back to Google Fonts and select the appropriate sizes.

  • Font-size must never be in px. Use rem instead.

  • Remove the fixed height on the image. Also, remove margin-top. Add display: block, and change width: 90% to max-width: 100% - this prevents it from overflowing its container.

  • To add some space between the image and the edge of the card, use padding on the card itself.

  • Remove the fixed width and height on the card. You rarely want to set fixed dimensions, as this easily creates issues with responsiveness.

  • Add a max-width of around 20rem on the card - this is so the card doesn't get too big on larger screens.

  • Remove the fixed height (see a pattern?) on the heading and the paragraph.

  • A more efficient way to center the card horizontally and vertically is to use Flexbox on the body:

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  

  • After you have done this, remove the margin-top and margin-bottom on the card.

  • Remove display: inline-block on the card. inline-block is mostly used for elements like buttons.

  Hope this has been clear and helpful - best of luck :)

  0