Kevin Powell - Community•2y 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

indeeOP•2y ago

when i use flexbox this is what happend help me pls

vince•2y ago

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

indeeOP•2y ago

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

vince•2y ago

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

Mannix•2y ago

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

indeeOP•2y 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•2y 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

indeeOP•2y ago

vince•2y 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.

indeeOP•2y ago

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

vince•2y ago

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

indeeOP•2y ago

oh thanks bro i will try to understand it

vince•2y 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