Responsive QR component using HTML and CSS

Community feedback

• 

  P

  Darkstar•1,440

  @DarkstarXDD

  Posted 6 months ago

  Couple of suggestions.

  • Use meaningful elements. Currently everything is just divs. divs are good for structuring things and help with layouts, but div itself is not a semantic element, so it doesn't really have any meaning.
  • "Improve your front-end..." should be the heading of this card. It can be a h1. Usually this entire card will be placed in a page along with other elements, so in that case this won't likely be the h1. The h1 would be some other element that explains the content of the entire page. But in the given scenario you can make it a h1.
  • "Scan the QR code..." should be a <p>.
  • Use rem unit for font-sizes. px units won't scale with the browsers font settings, so if the user who visits your webpage have changed their browser default font sizes, they won't be reflected on your page. rem on the other hand respects the browsers font settings and change accordingly. So always use rem for font sizes.
  • The card should not have a fixed height. It will cause overflowing if the content inside the card changes. You don't have to specify the height of text containers. The browser will automatically calculate it for you based on the content inside the card, and other values like font sizes, paddings etc.
  • Same way the card should not have a fixed width either. When a fixed width is used the card can't shrink past that value, even if the screen size is small and the card doesn't have any space to fit in. That again will cause overflow issues and break your site. Instead use a max-width on the card. So you can control how large the card is allowed to be, but at the same time the card has the freedom to shrink automatically when there is no room to fit in smaller screens.
  • Don't mix ids and classes when it comes to styling. Always use classes for styling. Mixing the two will make you run into specificity issues. You can use ids when linking two elements together. For example linking an input element with the label element, or when using aria-describedby.
  • You should use landmark elements in your page. All the content in your page should be wrapped in a <main>, except the content in <header> and <footer>. So the <div> that you have given the id="card" should actually be a <main>. The attribution should ideally go inside the <footer> and should be outside of the <main>.
  • The attribution should be at the bottom of the page, it's bit weird seeing it at the very top like that.
  • There's no reason to use position: absolute on the card. Also i don't see a reason for the .card-body div. You can directly use the .card div. Try to keep the HTML simple.
  • I would give the height: 100vh to the body instead of giving it to that div. And make sure you use min-height and not height. Never limit the height of the body or any element that contains text.

  10

  Marked as helpful