Skip to content
Submitted over 1 year ago

Responsive QR Code Component using Css Flexbox

Anishe Eniola Olumide•60
@Eniolasoar
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Please rate this project on a scale of 1-10.

Community feedback

  • Ecem Gokdogan•9,380
    @ecemgoPosted over 1 year ago

    Some recommendations regarding your code that could be of interest to you.

    HTML

    • If you want to use the recommended font-family for this project, you can add the following between the <head> tags in HTML file:
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">

    CSS

    • After adding them to the HTML, you can add this font-family to the body
    • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
    • For the color of the screen, you can use the recommended color in the body
    body {
  /* background-image: url(/images/); */
  background-color: hsl(212, 45%, 89%);
  font-family: "Outfit", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
    • When you use flexbox in the body, you don't need to use flexbox in the .inner-flex to center the card
    • If you use max-width, the card will be responsive
    • You'd better update padding like below
    .inner-flex {
  /* display: flex; */
  /* flex-direction: column; */
  /* padding: 10px; */
  padding: 20px;
  background-color: hsl(0, 0%, 100%);
  max-width: 300px;
  border-radius: 5%;
}
    • You'd better add font-size to .heading-text
    .heading-text {
  font-size: 20px;
}
    • Additionally, you don't need to use .outer-container and .inner-container anymore and you can remove them
    /* 
.outer-container{
  background-color: rgba(188, 217, 245,50%);
  width: 90%;
  height: 569px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0px 10px 15px grey;
} 
*/

/* 
.inner-container{
  height: 70%;
  width: 260px;
  background-color: hsl(0, 0%, 100%);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 10px;
  box-shadow: 0px 5px 10px rgb(128, 128, 128);
} 
*/
    • Finally, if you follow the steps above, the solution will be responsive.

    Hope I am helpful. :)

    Marked as helpful
    0
    Anishe Eniola Olumide•60
    @EniolasoarPosted over 1 year ago

    @ecemgo Thank you so much. I really appreciate it. I will take full heed of your advice. God bless you.

    1
    Ecem Gokdogan•9,380
    @ecemgoPosted over 1 year ago

    @Eniolasoar Happy to help! :)

    0
  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted over 1 year ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    CSS 🎨:

    • Let me explain, How you can easily center the component for better layout without usage of absolute positioning.
    • We don't need to use absolute to center the component both horizontally & vertically. Because using absolute will not dynamical centers our component at all states
    • To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.
    • For this demonstration we use css Grid to center the component
    body {
    min-height: 100vh;
    display: grid;
    place-items: center;
}
    • Now remove these styles, after removing you can able to see the changes
    .outer-container,
.inner-container {
  position: absolute;
  left: 50%;
  right: 50%;
  transform: translate(50%, 50%);
}
    • Now your component has been properly centered, My RATING: 9.99/10

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    0
  • Anishe Eniola Olumide•60
    @EniolasoarPosted over 1 year ago

    Thank you so much. I appreciate.God bless you

    0

Please log in to post a comment

Log in with GitHub

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