Skip to content
Submitted over 1 year ago

Qr code box css flex box

KennethBerglund•10
@KennethBerglund
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

my css flexbox skills are lacking not sure how to properly center align vertically and horizontally when containers are nested within containers multi containers deep

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted over 1 year ago

    Hello there 👋. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • To achieve true vertical centering, you need to specify the height of the parent container and then use align-items: center;. Here's the corrected code:
    body.weedContainer {
‎ ‎ /* width: 1250px; <---- Remove this */
‎ ‎ background-color: hsl(212, 45%, 89%);
‎ ‎ font-family: outfit;
‎ ‎ text-align: center; 
‎ ‎ margin: 0; /* Remove default margin to remove scroll-bars */

‎ ‎ /* This group of attributes centers an element using flexbox  */
‎ ‎ display: flex;
‎ ‎ justify-content: center;  /* Center items horizontally */
‎ ‎ align-items: center; /* Center items vertically */
‎ ‎ min-height: 100vh;  /* Set the height of the body to full viewport height */
}

.mainContainer {
‎ ‎ . . .
‎ ‎ /* margin-top: 100px; <---- Remove this*/ 
}

    Explanation:

    • Remove the width property, so the body can take up the full width of the screen by default.
    • Add height: 100vh; to the <body>. This ensures the body occupies the full height of the viewport, which is necessary for proper vertical centering.
    • Add align-items: center; to the body. This will center the child container vertically within the body.
    • Remove the margin-top: 100px; from the .mainContainer. This ensures that the container is truly centered vertically within the body.

    I hope you find it useful! 😄

    Happy coding!

    Marked as helpful
    1
    KennethBerglund•10
    @KennethBerglundPosted over 1 year ago

    Thanks for the response. I will work on changing some of these things and observe the results. Thank you so much. @MelvinAguilar

    1
  • Nature Son•1,100
    @NatureSon22Posted over 1 year ago

    Wrap your main content in a container and use 'display: grid;' for it. Also, add 'place-items: center;' to the wrapper to center-align the content both horizontally and vertically. This method is easier than using 'display: flex;' and achieves the same centering effect.

    .wrapper {
height: 100vh;
display: grid;
place-items: center;
}
    0
  • Mamadou Mar•550
    @Mar1362Posted over 1 year ago

    Hi friend, hope you're doing well ! I visited the site and the code and i think that you did a great job in my opinion i appreciate your work and here is some suggestion to improve the render:

    IN THE HTML

    • first remark is that we may think that you were lost in your code friend i mean your code here is too much nested and awkward according to your class names :
    <div class="mainContainer">
<div class="imageContainer">
<img class="image" src=".\images\qr.png" alt="">
<div class="bottomContainer">
<div class="textContainer">
<h4>Improve your front-end skills by building projects</h4> 
<p>
Scan the QR code to visit Frontend Mentor and take your coding skills to the 
next level
</p>

<div class="attribution">
<p>
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" 
target="_blank">Frontend Mentor</a>. 
Coded by <a href="#">Ken the Dev</a>.
</p>
</div>
</div>
</div>
</div>
</div>

    here what you did is creating a mainContainer in which you put an imageContainer that have not only the image but another container the bottomContainer etc. that is what your code is ordering to do. Maybe you're not using an adapted code editor in order to be able to format automaticly your code. Indeed, your code was not formated at all and that can lead to some error of interpretation for the coder. And if this is how you choosed to code your card then know that this is not a way from the infinite way to do it. So here is what i suggest you:

    <div class="mainContainer">
<div class="imageContainer">
<img class="image" src=".\images\qr.png" alt="">
</div>
<div class="bottomContainer">
<h4>Improve your front-end skills by building projects</h4> 
<p>
Scan the QR code to visit Frontend Mentor and take your coding skills to the 
next level
</p>
</div>
</div>  

<div class="attribution">
<p>
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" 
target="_blank">Frontend Mentor</a>. 
Coded by <a href="#">Ken the Dev</a>.
</p>
</div>

    As you can see i removed the attribution div outside the main container because it is not a part of the card. Actually, we can get better than that with semantic HTML let's take a look of what i suggest:

    <main class="mainContainer">
<figure class="imageContainer">
<img class="image" src=".\images\qr.png" alt="">
</figure>
<h4>Improve your front-end skills by building projects</h4> 
<p>
Scan the QR code to visit Frontend Mentor and take your coding skills to the 
next level
</p>

</main>  

<footer class="attribution">
<p>
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" 
target="_blank">Frontend Mentor</a>. 
Coded by <a href="#">Ken the Dev</a>.
</p>
</footer>

    As you can see i removed the bottomContainer Because it is not needed to wrap the heading and the paragraph in a container since the beginning. Now let's jump to the css and if there is any question or contribution then i will be glad to answer.

    AT THE CSS Here we won't comment the css according to my suggestion but to yours so here how we code the HTML doesn't matter.

    1. in your body element:
    body.weedContainer {
width: 1250px; 
background-color: hsl(212, 45%, 89%);
display: flex;
justify-content: center;
font-family: outfit;
text-align: center;
}

    • you gave a fixed width of 1250px to your body and even if you use media queries never do this again. Indeed, if you do this then in screens with less than 1250px of width, your page overflows and even your centered card will might be offscreen. So avoid this method and i think that the <body> always fit the navigator's window screen width (viewport) automaticly but if you want to be sure then feel free to use the following instead width: 100vw; so that it'll fit the viewport width.

    • Moreover, if you want to center your card you must know that the <body> doesn't fit the viewport height so if you center vertically your card won't be at the center of the viewport vertical axis. So, first thing first make your <body> get the 100% of the viewport height like this height: 100vh. With that done you must center the card at both main and cross axis of the flexbox container like the following justify-content: center;(main axis) align-items: center; (cross axis). So your code becomes:

    body.weedContainer {
width: 100vw; 
background-color: hsl(212, 45%, 89%);
display: flex;
justify-content: center;
align-items: center;
font-family: outfit;
text-align: center;
}
    1. In your mainContainer element
    .mainContainer {
height: 350px;
width: 225px;
background-color: white;
flex-direction: column;
border-radius: 10px;
display: flex;
justify-content: center;
margin-top: 100px;
     
}

    when i look to this then i guess that you don't master yet the flexbox methodology then i will just demand you to continue improving it but what i want to notice you here is never center with margins use flexbox or grid or even positionning to center. Moreover, don't give to an element a fixed height in px like you did here if you want it to be responsive and bear in mind that we never use fixed height in frontend developpement because if the content is well coded then the height will follow.

    I would rather exchange a lot with you but i don't have a lot of time but i intent and hope that this will help you improve your coding skill friend. Keep Improving. Happy Coding :)

    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