24 replies

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

KP-C

Kevin Powell - Community•3y ago•

24 replies

indee

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

when i use flexbox this is what happens

when i use flexbox this is what happens

Similar Threads

Similar Threads

Similar Threads