Responsive webpage with QR code

Community feedback

• 

  Kamran Kiani•1,840

  @kaamiikPosted 3 days ago

  There are some important issues in your code specially your CSS I wanna mention:

  1. Try to use a proper CSS reset at the start of your CSS style. Andy Bell and Josh Comeau both have a good one. You can simply search on the internet to find them.

  ---

  2. Use min-height: 100vh; instead of height:100vh;. height: 100vh strictly limits the height to the viewport size, potentially causing overflow issues if the content is larger than the viewport. On the other hand, min-height: 100vh allows your element to grow in height if the content exceeds the viewport size.

  ---

  3. Never limit your width and height in a container or element or tag that contains text inside. When you limit the width and height of elements containing text, you risk the text being cut off, overflowing, or becoming unreadable, especially on smaller screens or when the text dynamically changes. It's generally better to allow the container to adjust its size based on its content or set a flexible size that can adapt to different screen sizes and text lengths. You only need max-width here (and no need for width and height) because it prevents elements from stretching beyond a certain point, keeping them visually appealing across different screen sizes. It ensures your design remains adaptive and doesn't get too wide on larger screens.

  ---

  4. position: absolute; is completely wrong here. no need to use it.

  ---

  5. Your font-size and max-width should be in rem unit not px. You can read this article about it and why you should not use px as a font-size.

  ---

  6. No need to have media query for this challenge and always try to code mobile first.

  Marked as helpful

  0