QR Code Component, Responsive Web Design using HTML and CSS only

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted 6 months ago

  This has a few issues I can see.

  • the img doesn't need wrapping in an extra div. Try to keep html as lean as possible.
  • it's invalid to have width="320px" in html. That attribute doesn't accept units inside it. It also will damage performance having a width attribute without a height attribute on there as well. The only reason to have them is so that the browser knows the aspect ratio and can save the space for the image while it fetches it.
  • the image is the most important content on the page. It is definitely not decorative so must have a good alt description.
  • get into the habit now of always including a full modern css reset at the start of the styles in every project. It's not strictly necessary in this tiny project except for the image reset part, but it's still good to get into the habit of including it every time.
  • never limit the height of elements that contain text, including the body. Because this has been limited to a 100vh height, the background does not stretch beyond that and this looks broken on smaller mobiles, landscape mobiles and when people have a larger text size. Instead of height, use min-height so that the body can grow when it needs to.
  • the component must not have a width, and this definitely shouldn't be in px. This is causing the component to touch the edges of my screen in portrait view and is making it extremely narrow when I enlarge my text size. Instead, set a single max width in rem on the component. That allows it grow up to that max width, but also shrink narrower when it needs to. And my using rem it means the layout will scale along with the users chosen base text size.
  • Font size must never be in px.
  • give the component a little margin on all sides, or a wrapping element (like body) a little padding on all sides. This will prevent the component from touching screen edges, which it should never do.
  • has the footer been set as position absolute or something? I can't see that in the code but am seeing the footer overlap the card content in some views/zoom levels. That may also be being caused by the body having a limited height actually.

  Marked as helpful

  0
• 

  Albert Celestino•20

  @1lbertPosted 6 months ago

  Hi Grace, Thank you for this input, I didn't realize all of this stuff until you mentioned it. I'll make sure to mind this next time.

  • I think I forgot to remove the width="320px" in HTML, It's just an experiment, and I completely forgot about this. hehe
  • the alt for the image, it's my fault for not putting it, I didn't realize the alt is missing in my image element
  • I actually don't know that there's a full CSS Reset, and since you mentioned it, I immediately searched what it means and the sample code. I also copy the temple of Josh W Comeau's Custom CSS Reset for my reference to the next projects, thanks!
  • I thought giving the height of 100vh gives my layout responsiveness to all views, but upon checking it in landscape mode, I just realized what you're talking about.
  • to be honest, I'm still in the process of getting familiar with width, max-width, and min-width. So, I better do more experiments on this topic.
  • I should set my fonts into rem.

  Thank you for mentioning all of this, your comment is really helpful :)

  0