0

I have this project I'm working on where I have to make a simple webpage where there are three divs of equal size side by side. Here's a project description.

I've tried a lot of different ways to make it responsive, by making the first and second divs float left and making the third div float right and setting width to 30%.

I've also tried setting their display to inline-block and setting the width however the layout might work but when I change the viewport width, it changes the layout like the last div wraps below the others. I'm not sure why this happens, does anyone have any ideas?

Code:

body{
    background-color: #cfcfcf;
    font-family:Arial, Helvetica, sans-serif;
}
h1{
    text-align:center;
}
div{
    background-color: rgb(183, 183, 183);
    font-size:30px;
    border:dotted;
}
/* Large Devices*/
@media(min-width:992px){
    .Parent{
        width: 30%;
        display:inline-block;
        height:300px;
        overflow: hidden;
        margin:2.5%;
    }
    div.child_tag{
        padding:2.5%;
        float:right;
        width:30%;
        text-align:center;
        font-size:30px;
    }
    #chicken
    {
        background-color: #e99191;
    }
    #beef{
        background-color:#dfb2d9;
    }
    #sushi{
        background-color:#aadae6;
    }
}
<!DOCTYPE html>
<head>
    <title>
        Module 2 Solution
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <h1>Our Menu</h1>
    <div class = "col-lg-4 col-md-6 col-sm-12 Parent" id = "chicken_p">
        <div id = "chicken" class="child_tag">Chicken</div>
        <p>Lssdfjsdf lsjfljsd jsdjsdl ljljlsdlj lsdjflsj lsjdljsd</p>
    </div>
    <div class = "col-lg-4 col-md-6 col-sm-12 Parent" id = "beef_p">
        <div id = "beef" class="child_tag">Beef</div>
        <p>Lssdfjsdf lsjfljsd jsdjsdl ljljlsdlj lsdjflsj lsjdljsd</p>
    </div>
    <div class = "col-lg-4 col-md-12 col-sm-12 Parent" id = "sushi_p">
        <div id = "sushi" class="child_tag">Sushi</div>
        <p>Lssdfjsdf lsjfljsd jsdjsdl ljljlsdlj lsdjflsj lsjdljsd</p>
    </div>
</body>
isherwood
  • 58,414
  • 16
  • 114
  • 157
user310588
  • 1
  • Tips: 1) A web developer should never dump raw URLs into a page, even if it's a question on SO. 2) Floats are an old, hacky way to do layout. Don't use them for that. 3) There are scores of questions on SO dealing with this exact problem. Have you searched? – isherwood Sep 27 '22 at 13:05
  • 3
    The tool for dealing with this, since it achieved widespread support in 2013, is Flexbox. – Quentin Sep 27 '22 at 13:06
  • 1
    And 4)... you appear to be using the Bootstrap library, _which does all this for you_. Please tag your version. – isherwood Sep 27 '22 at 13:06
  • Never mind. From the project guide: _You are NOT allowed to use any CSS (or Javascript) framework for this assignment, including Twitter Bootstrap CSS Framework._ – isherwood Sep 27 '22 at 13:09
  • 1
    5) Be sure you're following tutorials and guides from this decade. The internet is very old, and there are many obsolete strategies laying around for the unsuspecting newbie. One of the best resources is https://developer.mozilla.org/en-US. I also like https://css-tricks.com, especially for its flexbox guide. – isherwood Sep 27 '22 at 13:11

0 Answers0