103 replies

why is this div shrinking ?

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

/* .parent{
    background-color: #23424A;
    padding: 50px;
    width: 80%;
    margin: 0 auto;
}

.child{
    background-color: cyan;
    height: 300px;
    width: 750px;
} */

.container{
    background-color: #23424A;
    padding: .5rem;
    color: yellow;
    border: solid 2px black;
}

.card {
    border-radius: 10px;
    background-color: black;
    padding: .5rem;
    color: white;
    width: 450px;
    margin: 4rem 0rem;
}

.card > img {
    border-radius: 10px;
    display: block;
    width: 100%;
    object-fit: cover;
}
.card > p{
    color: #7f7b7b;
    margin: .6rem 0;
}
.card > h2 {
    margin-top: 10px;
}
.card > button {
    background-color: orangered;
    border: none;
    color: white;
    padding: .5rem 0;
    border-radius: 10px;
    font-weight: bold;
}

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

/* .parent{
    background-color: #23424A;
    padding: 50px;
    width: 80%;
    margin: 0 auto;
}

.child{
    background-color: cyan;
    height: 300px;
    width: 750px;
} */

.container{
    background-color: #23424A;
    padding: .5rem;
    color: yellow;
    border: solid 2px black;
}

.card {
    border-radius: 10px;
    background-color: black;
    padding: .5rem;
    color: white;
    width: 450px;
    margin: 4rem 0rem;
}

.card > img {
    border-radius: 10px;
    display: block;
    width: 100%;
    object-fit: cover;
}
.card > p{
    color: #7f7b7b;
    margin: .6rem 0;
}
.card > h2 {
    margin-top: 10px;
}
.card > button {
    background-color: orangered;
    border: none;
    color: white;
    padding: .5rem 0;
    border-radius: 10px;
    font-weight: bold;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis voluptatem qui magnam. Adipisci voluptas totam
        veniam iusto voluptatum. Similique commodi officia ratione rerum, repudiandae, inventore, eum accusamus vero
        impedit qui necessitatibus fuga minus tenetur? Eum ipsam deleniti tempore ut placeat ducimus neque, dolor,
        pariatur, doloremque ipsa corporis. Exercitationem, nemo distinctio!
    </div>

    <div class="card">
        <img src="./luffy.jpg" alt="">
        <h2>Anime Guess Quest</h2>
        <p>Shown a series of anime character, pick the correct name of each character</p>
    </div>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis voluptatem qui magnam. Adipisci voluptas totam
        veniam iusto voluptatum. Similique commodi officia ratione rerum, repudiandae, inventore, eum accusamus vero
        impedit qui necessitatibus fuga minus tenetur? Eum ipsam deleniti tempore ut placeat ducimus neque, dolor,
        pariatur, doloremque ipsa corporis. Exercitationem, nemo distinctio!
    </div>

    <div class="card">
        <img src="./luffy.jpg" alt="">
        <h2>Anime Guess Quest</h2>
        <p>Shown a series of anime character, pick the correct name of each character</p>
    </div>

</body>

</html>

KP-C

Kevin Powell - Community•3y ago•

103 replies

Bismuth

why is this div shrinking ?

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

/* .parent{
    background-color: #23424A;
    padding: 50px;
    width: 80%;
    margin: 0 auto;
}

.child{
    background-color: cyan;
    height: 300px;
    width: 750px;
} */

.container{
    background-color: #23424A;
    padding: .5rem;
    color: yellow;
    border: solid 2px black;
}

.card {
    border-radius: 10px;
    background-color: black;
    padding: .5rem;
    color: white;
    width: 450px;
    margin: 4rem 0rem;
}

.card > img {
    border-radius: 10px;
    display: block;
    width: 100%;
    object-fit: cover;
}
.card > p{
    color: #7f7b7b;
    margin: .6rem 0;
}
.card > h2 {
    margin-top: 10px;
}
.card > button {
    background-color: orangered;
    border: none;
    color: white;
    padding: .5rem 0;
    border-radius: 10px;
    font-weight: bold;
}

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

/* .parent{
    background-color: #23424A;
    padding: 50px;
    width: 80%;
    margin: 0 auto;
}

.child{
    background-color: cyan;
    height: 300px;
    width: 750px;
} */

.container{
    background-color: #23424A;
    padding: .5rem;
    color: yellow;
    border: solid 2px black;
}

.card {
    border-radius: 10px;
    background-color: black;
    padding: .5rem;
    color: white;
    width: 450px;
    margin: 4rem 0rem;
}

.card > img {
    border-radius: 10px;
    display: block;
    width: 100%;
    object-fit: cover;
}
.card > p{
    color: #7f7b7b;
    margin: .6rem 0;
}
.card > h2 {
    margin-top: 10px;
}
.card > button {
    background-color: orangered;
    border: none;
    color: white;
    padding: .5rem 0;
    border-radius: 10px;
    font-weight: bold;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis voluptatem qui magnam. Adipisci voluptas totam
        veniam iusto voluptatum. Similique commodi officia ratione rerum, repudiandae, inventore, eum accusamus vero
        impedit qui necessitatibus fuga minus tenetur? Eum ipsam deleniti tempore ut placeat ducimus neque, dolor,
        pariatur, doloremque ipsa corporis. Exercitationem, nemo distinctio!
    </div>

    <div class="card">
        <img src="./luffy.jpg" alt="">
        <h2>Anime Guess Quest</h2>
        <p>Shown a series of anime character, pick the correct name of each character</p>
    </div>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis voluptatem qui magnam. Adipisci voluptas totam
        veniam iusto voluptatum. Similique commodi officia ratione rerum, repudiandae, inventore, eum accusamus vero
        impedit qui necessitatibus fuga minus tenetur? Eum ipsam deleniti tempore ut placeat ducimus neque, dolor,
        pariatur, doloremque ipsa corporis. Exercitationem, nemo distinctio!
    </div>

    <div class="card">
        <img src="./luffy.jpg" alt="">
        <h2>Anime Guess Quest</h2>
        <p>Shown a series of anime character, pick the correct name of each character</p>
    </div>

</body>

</html>

why is this div shrinking ?

why is this div shrinking ?

Similar Threads

Similar Threads

Similar Threads