Responsive landing page without flexbox, grid etc.

Community feedback

• 

  Lucas 👾•104,220

  @correlucasPosted over 2 years ago

  👾Hi @AM-png, congratulations on your solution!👋 Welcome to the Frontend Mentor Coding Community!

  Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

  1.Fix the alignment of the whole content using flex and min-height to manage the vertical alignment and make everything centered.First of all put min-height: 100vh to the body to make the body display 100% of the viewport height (this makes the container align to the height size that's now 100% of the screen height) size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

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

  2.Use relative units like rem or em instead of px to have a better performance when your page content resizes on different screens and devices. REM and EM does not just apply to font size, but all sizes as well. To save your time you can code your whole page using px and then in the end use a VsCode plugin called px to rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

  3.Something that can be a time saver for you is to use a CSS RESET to remove all default settings for margins, making the images easier to work, see the article below where you can copy and paste this CSS code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

  Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  AM-png•30

  @AM-pngPosted over 2 years ago

  @correlucas Thanks! I made the changes.

  1
• Account deleted

  Hey , some suggestions to improve you code:

  • To center you content to your page, add the following to your Body Element:

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

  • The Alt Tag description for the QR image needs to be improved upon. Its needs to tell screen reader users what it is and where it will take them to when they scan it.

  • Change the width to max-width in your .card to make it responsive.

  • Delete the height from the img, not needed.

  Happy Coding!

  Marked as helpful

  0

  ---

  

  AM-png•30

  @AM-pngPosted over 2 years ago

  @vcarames Done, thank you for the feedback!

  0
• 

  Chermann KING•450

  @Chermann-KINGPosted over 2 years ago

  Hey @AM-png, some suggestions to improve you code:

  If you notice, it is a card displaying a QR code. The <aside> tag that you use here to enclose each element of the map (texts and image) is not recommended for this purpose. You could have used a simple <div> or even an <article>. All the same congratulations for the work done.

  I leave you the link that can show you the good use of <aside> and <article> tags

  Here is my solution to this challenge if you wish.

  Marked as helpful

  0

  ---

  

  AM-png•30

  @AM-pngPosted over 2 years ago

  @Chermann-KING I removed the aside tag as It was unnecessary. After reading the article you posted, I ended up enclosing the whole card with the <article> tag as the card is indeed an independent, self-contained content. That was helpful, thanks!

  1