Responsive QR Code Component

Community feedback

• 

  Andy•520

  @AndyAshleyPosted over 2 years ago

  Hey Zack! Good job on the challenge! I would suggest a few things for you. Using vw or vh on text isn't a great idea. It does scale, but it gets so tiny that no one could read it. Also if you made your body or main container have a display: flex with justify-content: center and align-items: center and remove position: absolute on the id="base" container, it wouldn't squish like that and it would also remain centered to the page.

  for the html errors, the lang one can be fixed in nextJS by adding this to your next.config.js:

  
  module.exports = {
    i18n: {
      locales: ["en"],
      defaultLocale: "en",
    },
  };
  

  then just make sure all your images have alt tags. :)

  you could also give the card container a max-width to prevent it from getting larger than intended. that way it can only get so big, but can scale smaller if needed.

  I hope that helps! feel free to ask me any questions if ya need to, Happy Coding!

  Marked as helpful

  0

  ---

  

  Zack•30

  @eftpmcPosted over 2 years ago

  @AndyAshley I'm working on the changes and for the display: flex part the align-items is working, but the justify-content makes it a little to the left of the center instead of right in the center. Do you know what could be causing this issue?

  0

  

  Andy•520

  @AndyAshleyPosted over 2 years ago

  @eftpmc Hey Zack, Did you also remove

    width: 20%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  

  from #base ? if so, check and see if there's some rogue padding or margin hanging around that could be throwing it off. If you open it up in chrome and go to the dev tools you can hover over elements and see what's going on with the positioning. Let me know how it goes!

  0

  

  Andy•520

  @AndyAshleyPosted over 2 years ago

  @eftpmc in the chrome dev tools on your solution I also added min-height: 100vh to the body (to give it space to actually align items in the center), and text-align: center + max-width: 300px to the #base element as well (to center the images and text within the container) . Sorry man, late night lol.

  0

  

  Zack•30

  @eftpmcPosted over 2 years ago

  @AndyAshley Awesome thank you I think I got everything working, its now in the center and looks pretty good. Can you lmk how it looks and If I did everything correctly?

  0

  

  Zack•30

  @eftpmcPosted over 2 years ago

  @AndyAshley Is there anyway I can change the live solution link? I changed it on the github repo but I don't know how to change it on here?

  0

  

  Zack•30

  @eftpmcPosted over 2 years ago

  @eftpmc It actually just updated I had to just wait a bit haha

  0