@media max-width: XX px; not working properly

Question

I'm new to web development and I'm having a problem with using @media

I'm trying to achieve this display when the screen size goes below 992px, meaning 991px and below. original image

My problem is when screen is at 991px, the display is like this. problem

But when my screen is below 991px, it displays the expected behavior. 991px below

Here's my HTML code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <title>Assignment Solution for Module 2</title>
</head>
<body>
    <h1>Our Menu</h1>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-4 col-md-6">
                <h3>Div 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>  

            <div class="col-lg-4 col-md-6">
                <h3>Div 2</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>          
            <div class="col-lg-4 col-md-12">
                <h3>Div 3</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            
            </div>
        </div>
    </div>
</body>
</html>

Here's my CSS code:

* {
    box-sizing: border-box;
}

body{
    margin-top: 40px;
    background-color: #F9F9FB;
}

.container-fluid {
    margin-top: 50px;
}

h1, h3{
  text-align: center;
}

h3 {
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    margin: 0px;
    padding: 1px;
    width: 33.33%;
    height: 28px;
  float: right;
    background-color: #B59F84;

}

.row div {
    border: 1px solid black;
    padding: 0px;
    margin: 10px;
    background-color: #FFFFF5;
}

p {
    margin: 0px;
    padding: 10px;
    clear: right;
}

/********** Large devices only **********/
@media (min-width: 992px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }
  .col-lg-1 {
    width: calc(8.33% - 20px);
  }
  .col-lg-2 {
    width: calc(16.66% - 20px);
  }
  .col-lg-3 {
    width: calc(25% - 20px);
  }
  .col-lg-4 {
    width: calc(33.33% - 20px);
  }
  .col-lg-5 {
    width: calc(41.66% - 20px);
  }
  .col-lg-6 {
    width: calc(50% - 20px);
  }
  .col-lg-7 {
    width: calc(58.33% - 20px);
  }
  .col-lg-8 {
    width: calc(66.66% - 20px);
  }
  .col-lg-9 {
    width: calc(74.99% - 20px);
  }
  .col-lg-10 {
    width: calc(83.33% - 20px);
  }
  .col-lg-11 {
    width: calc(91.66% - 20px);
  }
  .col-lg-12 {
    width: calc(100% - 20px);
  }
}

/********** Medium devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-1 {
    width: calc(8.33% - 20px);
  }
  .col-md-2 {
    width: calc(16.66% - 20px);
  }
  .col-md-3 {
    width: calc(25% - 20px);
  }
  .col-md-4 {
    width: calc(33.33% - 20px);
  }
  .col-md-5 {
    width: calc(41.66% - 20px);
  }
  .col-md-6 {
    width: calc(50% - 20px);
  }
  .col-md-7 {
    width: calc(58.33% - 20px);
  }
  .col-md-8 {
    width: calc(66.66% - 20px);
  }
  .col-md-9 {
    width: calc(74.99% - 20px);
  }
  .col-md-10 {
    width: calc(83.33% - 20px);
  }
  .col-md-11 {
    width: calc(91.66% - 20px);
  }
  .col-md-12 {
    width: calc(100% - 20px);
  }
}

What I observe is when I adjust the range to @media (min-width: 768px) and (max-width: 992px ) it displays the expected behavior. adjusted max-width

Answer 1

You can remove the float: right; property from the h3 element and set its width to 33.33% instead, this way you can have the layout that you expect.

And also, you can add min-width: 991px to the.row div elements to ensure they will not go under the h3 element when the screen size is below 991px.

h3 {
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    margin: 0px;
    padding: 1px;
    width: 33.33%;
    height: 28px;
    background-color: #B59F84;
}

.row div {
    border: 1px solid black;
    padding: 0px;
    margin: 10px;
    background-color: #FFFFF5;
    min-width: 991px;
}

@media max-width: XX px; not working properly

Question

1 answers

solution1
0 2023-01-12 04:20:26

@media max-width: XX px; not working properly

Question

1 answers

solution1 0 2023-01-12 04:20:26

solution1
0 2023-01-12 04:20:26