Submitted over 1 year ago

Responsive QR Code Component using Flexbox

Aviral Sharma• 220

@aviralsharma07

Preview site View code

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I got really confused with deciding appropriate font sizes and had to refer to other solutions and try different sizes. Is there a better way to deal with it while we are cloning a project?
Although I have tried to make the project as responsive as I can. I did not understand or use Media Queries for Mobile's first approach. How can I do that?
I'd love to know your views on HTML Semantics and element naming in my code.

Community feedback

Travolgi 🍕• 31,480

@denielden

Posted over 1 year ago

Hello Aviral, You have done a good work! 😁

Font sizes are eye to eye unless you are given the size to insert in the code.
The approach to Media Queries is very easy: you only use them when the design breaks at a certain screen resolution and you scale the code of the same classes to that resolution read here

Some little tips to improve your code:

remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of qr image
remove all margin from box class
use flexbox to the body to center the card. Read here -> best flex guide
use min-height: 100vh to body instead of height, otherwise the content is cut off when the browser height is less than the content

Keep learning how to code with your amazing solutions to challenges.

Hope this help 😉 and Happy coding!

Marked as helpful

Aviral Sharma• 220

@aviralsharma07

Posted over 1 year ago

@denielden Thank You Very Much for the feedback! I'll do it again and improve on the things you have told me.

Travolgi 🍕• 31,480

@denielden

Posted over 1 year ago

@aviralsharma07 You are welcome and keep it up :)

Grace• 27,950

@grace-snow

Posted over 1 year ago

That img is the most important content on the page, why have you aria hidden it?!

Don't use the b element. Set the font weight you want in css

Body should never have a limited height. Use min height instead.

Beware using % for border radius. It will have horrible results if used on anything that's not square

Marked as helpful

Grace• 27,950

@grace-snow

Posted over 1 year ago

Here are notes and changes made in browser. I hope they are helpful:


/* styles.css | https://qr-code-component-aviral.netlify.app/styles.css */

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

.box {
  /* margin: auto; */
  /* margin-top: 3rem; */
  /* display: flex; */
  /* flex-direction: column; */
  /* justify-content: center; */
  /* border-radius: 3%; */
  margin: 1rem;
  border-radius: 15px;
  text-align: center;
}

.attribution {
  /* bottom: 10px; */
  /* width: 100%; */
  /* position: absolute; */
}

.attribution p {
  /* font-size: 0.8rem; */
  /* color: hsl(212, 7%, 60%); */
  /* margin: 1.8rem auto auto 0; */
  font-size: 0.9375rem;
  margin: 1.8rem;
}

.attribution a {
  /* font-size: 0.8rem; */
  /* color: hsl(212, 7%, 60%); */
}

.qrCode img {
  not: ;
  note: why is this in a div? Does it need it?;
  note: must not be aria-hidden;
}

.textBox {
  /* text-align: center; */
  /* padding: 1.5rem 0 0.5rem 0; */
}

.textBox h1 {
  margin-top: 1rem;
}

.textBox p {
  /* margin: 0.5rem 0; */
  margin: 0.5rem auto;
  note: remove all <br> elements. That is not a good way to do line breaks. Instead have a max-width on the paragraph;
  max-width: 25ch;
}

/* Inline #1 | https://qr-code-component-aviral.netlify.app/ */

footer {
  note: Footer is its own landmark. It should NOT sit within main;
}

main {
  /* display: center; */
  display: grid;
  place-content: center;
}

Marked as helpful

Aviral Sharma• 220

@aviralsharma07

Posted over 1 year ago

@grace-snow Thank You very much for the feedback! I'll do it again and improve on the things you have told me this time.

Maca• 630

@Maacaa0

Posted over 1 year ago

Hello,

To answer your first question. I use browser extension called perfectpixel. Which let you put the design image overlay over the page you are creating. It helps you see how accurate you are with your project.

Hope I helped 😁

Good work, keep it up.

Marked as helpful

Aviral Sharma• 220

@aviralsharma07

Posted over 1 year ago

@Maacaa0 Thank you for the Resource !!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord