Home > Blockchain >  How to make all elements responsive
How to make all elements responsive

Time:11-29

I am new to HTML and CSS, and I am trying to do some projects to get used to the basics. However I have got stuck with how I can make everything in this window responsive. When I resize the screen to mobile it looks odd compared to when it's stretched out into desktop view. How do I make it so that the text and elements stay the same size and the entire box shrinks rather than the text? Basically I guess how do I make this whole box and contents [responsive][1] to screen size please? Thank you :)

Here is the HTML AND CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: hsl(217, 54%, 11%);
}

.container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
    background-color: hsl(216, 50%, 16%);
    width: 40vw;
    height: 70vh;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 40px;
    border-radius: 10px;
}

h3 {
    color: white; font-family: 'Outfit', sans-serif; font-size: 18px;
}
.box__img {
    width: 100%; 
    object-fit: contain;
    position: relative;
}
.box__text {
    color: #ECECEC; font-family: 'Outfit', sans-serif; font-size: 12px;
}

.diamond {
    padding-right: 12px;
    position: relative;

}
.diamond_text {
    color: hsl(178, 100%, 50%); font-family: 'Outfit', sans-serif; font-size: 12px;
    display: inline;

}
.clock_icon {
    padding-left: 5px;
}

.clock_text {
color: hsl(211, 67%, 67%);
font-family: 'Outfit', sans-serif; 
font-size: 11px;
padding-top: 2px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project 2</title>
    <link rel="stylesheet" href="stylesheet.css">
    <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@300&display=swap" rel="stylesheet">
</head>

<body>
    <main>
        <div class="container">
            <div class="main">
                <div class="box">
                    <img class="box__img" src="image-equilibrium.jpg" class="w3-round" alt="Square image">
                    <br>
                    <br>
                    <h3>Equilibrium #2000</h3>
                    <br>
                    <p class="box__text">Our Equilibrium collection promotes health and calm.</p>
                    <br>
                    <img src="c.svg" class="diamond" alt="diamond" style='float: left;' />
                    <p class="diamond_text">0.041 ETH</p>
                    <img src="icon-clock.svg" style='float: right;' class="clock_icon" />
                    <p style='float: right;' class="clock_text">3 days left</p>
                </div>
            </div>
        </div>
    </main>
</body>

</html>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

Try to switch the 'px' on 'em',

Pixel is a static measurement, while percent and EM are relative measurements. The size of an EM or percent depends on its parent. If the body's text size is 16 pixels, then 150% or 1.5 EM will be 24 pixels (1.5 * 16).

CodePudding user response:

you can try this : use a media query to make all elements responsive...

 *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
         }

        body {
            background-color: hsl(217, 54%, 11%);
        }

        .container {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding:10px;
        }

   .box {
        background-color: hsl(216, 50%, 16%);
        width:40vw;
        height:auto;
        padding:40px;
        border-radius: 10px;
      }

        h3 {
            color: white; font-family: 'Outfit', sans-serif; font-size: 18px;
        }
        .box__img {
            width: 100%; 
            max-width:100%;
            object-fit: contain;
            position: relative;
        }
        .box__text {
            color: #ECECEC; font-family: 'Outfit', sans-serif; font-size: 12px;
        }

        .diamond {
            padding-right: 12px;
            position: relative;

        }
        .diamond_text {
            color: hsl(178, 100%, 50%); font-family: 'Outfit', sans-serif; font-size: 12px;
            display: inline;

        }
        .clock_icon {
            padding-left: 5px;
        }
        .clock_text {
        color: hsl(211, 67%, 67%);
        font-family: 'Outfit', sans-serif; 
        font-size: 11px;
        padding-top: 2px;
        }


        /*  media  */

        /*for mobile*/
        @media(max-width: 768px)
        {
            .box
            {
                width:100%;
            }
        }
        @media(min-width:768px)
        {
            .box
            {
                width:40vw;
            }
        }
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project 2</title>
    <link rel="stylesheet" href="stylesheet.css">
    <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@300&display=swap" rel="stylesheet">
    <title></title>
</head>
<!DOCTYPE html>
<html lang="en">
<body>
    <main>
        <div class="container">
            <div class="main">
                <div class="box">
                    <img class="box__img" src="image-equilibrium.jpg" class="w3-round" alt="Square image">
                    <br>
                    <br>
                    <h3>Equilibrium #2000</h3>
                    <br>
                    <p class="box__text">Our Equilibrium collection promotes health and calm.</p>
                    <br>
                    <img src="c.svg" class="diamond" alt="diamond" style='float: left;' />
                    <p class="diamond_text">0.041 ETH</p>
                    <img src="icon-clock.svg" style='float: right;' class="clock_icon" />
                    <p style='float: right;' class="clock_text">3 days left</p>
                </div>
            </div>
        </div>
    </main>
</body>

</html>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

  • Related