When the width of the screen is less than 992 pixels, my div will be hidden

Question

When the width of the screen is less than 992 pixels, my div will be hidden

I have been working with the bootstrap4 layout, and I noticed that when the screen width is less than 992px, the yellow-div is overlapping the brown-div. Can someone explain why this is happening and suggest a solution?

Below is the code snippet:

.header {
  height: 100px;
}

.header .blue {
  height: 100%;
  background-color: blue;
}

.header .brown {
  height: 100%;
  background-color: brown;
}

.content {
  height: 100px;
}

.content .yellow {
  height: 100%;
  background-color: yellow;
}

.content .green {
  height: 100%;
  background-color: green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row header ">
    <div class="col-md-2 col-xl-2 blue ">blue div</div>
    <div class="col-md-10 col-xl-10 brown">brown div</div>
  </div>
  <div class="row content ">
    <div class="col-md-2 col-xl-2 yellow ">yellow div</div>
    <div class="col-md-10 col-xl-10 green">green div</div>
  </div>
</div>

html css responsive-design bootstrap-4

Answer 1

Answer №1

It appears that the issue arises when the screen width is less than 768px, not 992px. Here's the explanation:

The child divs (blue, brown, yellow, and green) occupy 100% height of their parent divs (header and content). As a result, the content row overlaps the brown div when the blue and brown divs are stacked on top of each other.

If there were a third row introduced in a similar manner, the green div would also be hidden by it.

To resolve this issue, you can utilize a media query to adjust the height of the child divs to 50% of the parent div and potentially double the height of the parent divs. Here's how you can do it:

.header {
  height: 100px;
}

.header .blue {
  height: 100%;
  background-color: blue;
}

.header .brown {
  height: 100%;
  background-color: brown;
}

@media (max-width: 767px) {
  .header {
    height: 200px;
  }
  .header .blue,
  .header .brown {
    height: 50%;
  }
}

.content {
  height: 100px;
}

.content .yellow {
  height: 100%;
  background-color: yellow;
}

.content .green {
  height: 100%;
  background-color: green;
}

@media (max-width: 767px) {
  .content {
    height: 200px;
  }
  .content .yellow,
  .content .green {
    height: 50%;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row header ">
    <div class="col-md-2 col-xl-2 blue ">blue div</div>
    <div class="col-md-10 col-xl-10 brown">brown div</div>
  </div>
  <div class="row content ">
    <div class="col-md-2 col-xl-2 yellow ">yellow div</div>
    <div class="col-md-10 col-xl-10 green">green div</div>
  </div>
</div>

I hope this solution proves to be helpful. Best regards!

Answer 2

It appears that the issue arises when the screen width is less than 768px, not 992px. Here's the explanation:

The child divs (blue, brown, yellow, and green) occupy 100% height of their parent divs (header and content). As a result, the content row overlaps the brown div when the blue and brown divs are stacked on top of each other.

If there were a third row introduced in a similar manner, the green div would also be hidden by it.

To resolve this issue, you can utilize a media query to adjust the height of the child divs to 50% of the parent div and potentially double the height of the parent divs. Here's how you can do it:

.header {
  height: 100px;
}

.header .blue {
  height: 100%;
  background-color: blue;
}

.header .brown {
  height: 100%;
  background-color: brown;
}

@media (max-width: 767px) {
  .header {
    height: 200px;
  }
  .header .blue,
  .header .brown {
    height: 50%;
  }
}

.content {
  height: 100px;
}

.content .yellow {
  height: 100%;
  background-color: yellow;
}

.content .green {
  height: 100%;
  background-color: green;
}

@media (max-width: 767px) {
  .content {
    height: 200px;
  }
  .content .yellow,
  .content .green {
    height: 50%;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row header ">
    <div class="col-md-2 col-xl-2 blue ">blue div</div>
    <div class="col-md-10 col-xl-10 brown">brown div</div>
  </div>
  <div class="row content ">
    <div class="col-md-2 col-xl-2 yellow ">yellow div</div>
    <div class="col-md-10 col-xl-10 green">green div</div>
  </div>
</div>

I hope this solution proves to be helpful. Best regards!

Answer 3

Answer №2

For a more flexible approach, consider setting height values for each section individually instead of fixed values for header and content. You can use the vh unit to adjust the height based on the viewport size. Here's an example:

.header .blue {
  height: 100px;
  background-color: blue;
}

.header .brown {
  height: 100px;
  background-color: brown;
}

.content .yellow {
  height: 100px;
  background-color: yellow;
}

.content .green {
  height: 100px;
  background-color: green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row header ">
    <div class="col-md-2 col-xl-2 blue ">blue div</div>
    <div class="col-md-10 col-xl-10 brown">brown div</div>
  </div>
  <div class="row content ">
    <div class="col-md-2 col-xl-2 yellow ">yellow div</div>
    <div class="col-md-10 col-xl-10 green">green div</div>
  </div>
</div>

Answer 4

For a more flexible approach, consider setting height values for each section individually instead of fixed values for header and content. You can use the vh unit to adjust the height based on the viewport size. Here's an example:

.header .blue {
  height: 100px;
  background-color: blue;
}

.header .brown {
  height: 100px;
  background-color: brown;
}

.content .yellow {
  height: 100px;
  background-color: yellow;
}

.content .green {
  height: 100px;
  background-color: green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row header ">
    <div class="col-md-2 col-xl-2 blue ">blue div</div>
    <div class="col-md-10 col-xl-10 brown">brown div</div>
  </div>
  <div class="row content ">
    <div class="col-md-2 col-xl-2 yellow ">yellow div</div>
    <div class="col-md-10 col-xl-10 green">green div</div>
  </div>
</div>

When the width of the screen is less than 992 pixels, my div will be hidden

Answer №1

Answer №2

Similar questions

`A brief disruption in loading the visual style of Google Maps`

Adding breakpoints and whitespace in the comment section within Python's Django framework

Sending a POST request using HTML

"Using Javascript to assign a class based on a date being greater than

What is the best way to utilize justify-content or align-self to perfectly center this?

"Struggling with setting the default checked state for single and multiple checkboxes? The ng-init method with checkboxModel.value=true seems to be ineffective – any suggestions

Utilizing JQuery slideToggle() to Toggle Between Opening and Closing Multiple Divs

Dynamic CSS sizing

creating a table displaying data in a horizontal format sourced from ajax/json transformation

Align Image According to Dimensions of the Browser

Is the input field not properly centered on the page?

Invoke a function to retrieve HTML content from a controller method

There seems to be a clash between Modal Semantic UI React and Bootstrap causing issues

Revitalizing HTML and Google Maps with AJAX, PHP, and JQuery

Exploring different sections of the website

In PHP, the counter will reset to zero after reaching 4 items and start a new div for the

Compact looped slideshow

What is the best way to retrieve the file and directory tree structure from git using php?

Cover any HTML element with a translucent overlay box

Adjust the button's color even after it has been clicked