Kevin Powell - Community•13mo ago

when i use flexbox this is what happens

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="stylesheet" href="style.css" />
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

  <title>Frontend Mentor | QR code component</title>

</head>
<body>
  <div class='wholeunit'>
    <img class='qr-code-img' src="./images/image-qr-code.png" alt="qr-code" />
    <h1>Improve your front-end skills by building projects</h1>
    <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
  </div>
    <p class='attribution'>Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
    Coded by <a href="#">Your Name Here</a>.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="stylesheet" href="style.css" />
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

  <title>Frontend Mentor | QR code component</title>

</head>
<body>
  <div class='wholeunit'>
    <img class='qr-code-img' src="./images/image-qr-code.png" alt="qr-code" />
    <h1>Improve your front-end skills by building projects</h1>
    <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
  </div>
    <p class='attribution'>Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
    Coded by <a href="#">Your Name Here</a>.</p>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

:root{
    --White: hsl(0, 0%, 100%);
    --Light-gray: hsl(212, 45%, 89%);
    --Grayish-blue: hsl(220, 15%, 55%);
    --Dark-blue: hsl(218, 44%, 22%);
}


body{
    background-color: var(--Light-gray);
    display: flex;
}

.wholeunit{
    background-color: var(--White);
    max-width:300px;
    text-align: center;
    padding:20px;
    border-radius: 10px;
}

.qr-code-img{
    object-fit: contain;
    height: 100%;
    width: 100%;
    border-radius: 10px;
}

h1{
    font-size: 1.5rem;
    font-family: 'Outfit', sans-serif;
    color: var(--Dark-blue);
}

p{
    font-family: 'Outfit', sans-serif;
    color: var(--Grayish-blue);
    margin: 10px;
}

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

:root{
    --White: hsl(0, 0%, 100%);
    --Light-gray: hsl(212, 45%, 89%);
    --Grayish-blue: hsl(220, 15%, 55%);
    --Dark-blue: hsl(218, 44%, 22%);
}


body{
    background-color: var(--Light-gray);
    display: flex;
}

.wholeunit{
    background-color: var(--White);
    max-width:300px;
    text-align: center;
    padding:20px;
    border-radius: 10px;
}

.qr-code-img{
    object-fit: contain;
    height: 100%;
    width: 100%;
    border-radius: 10px;
}

h1{
    font-size: 1.5rem;
    font-family: 'Outfit', sans-serif;
    color: var(--Dark-blue);
}

p{
    font-family: 'Outfit', sans-serif;
    color: var(--Grayish-blue);
    margin: 10px;
}

what what should i do ? and help me to better this small challenge in frontendmentor 🙂

13 Replies

indee•13mo ago

when i use flexbox this is what happend help me pls

vince•13mo ago

Could you paste it in a codepen please? Also, what exactly is the issue?

indee•13mo ago

when i used the flex the text from the div is pushed down

vince•13mo ago

You're going to have to be a bit more specific Which text?

Mannix•13mo ago

removing height: 100% from the img tag seems to fix it

indee•13mo ago

https://codepen.io/vellanki-indeevar/pen/rNQVVbY this is the codepen thanks bro and is there anything that i can improve in it

vince•13mo ago

I'll have to take a look, but first thing that sticks out to me is that you're using @import to load the google fonts. Use the <link> method instead; @import basically makes it take more time for the webpage to fetch the font style Read more: https://stackoverflow.com/a/12380004/13264587

indee•13mo ago

vince•13mo ago

1. Avoid starting your variables with uppercase characters. --White should become --white 2. You generally want to avoid using display: flex on the body element. It's just a general rule of thumb that people follow, so you don't have to if you think it's easier for you. 3. wholeunit should become whole-unit. 4. Use rem for padding and margins. You don't want to be using px.

indee•13mo ago

i will do that and i want the attribution p tag to stick on the bottom how do i do that

vince•13mo ago

https://codepen.io/vince1444/pen/BaGNojK I changed the html up too

indee•13mo ago

oh thanks bro i will try to understand it

vince•13mo ago

Let me know if you have any questions Kevin has videos on all this stuff pretty much, from how flex works, to resets, to how margins behave things like that

Gaming

Programming

when i use flexbox this is what happens