What is the best way to move one container below another in mobile view?

I need container-2 to be fully visible on mobile view, but the boxes in box2 are covering it. The size of the boxes in box2 should not change; I just want container 2 to be pushed down so that it is completely visible.

body {
  margin: 0;
  width: 100%;
}
.container {
  width: 100%;
  height: 100vh;
  background-color: rgb(152, 152, 152);
}
.container-2 {
  width: 100%;
  height: 100vh;
  background-color: rgb(46, 6, 6);
}
.box-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}
.box1 {
  background-color: rgb(65, 186, 186);
  width: 50%;
  height: 100%;
}
.box2 {
  background-color: rgb(92, 191, 124);
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .box1 {
    background-color: rgb(65, 186, 186);
    width: 100%;
    height: 50%;
  }
  .box2 {
    background-color: rgb(92, 191, 124);
    width: 100%;
    height: 50%;
  }
}
<body>

  <div class="container">
    <div class="box-container">
      <div class="box1">

      </div>
      <div class="box2" id="box">
        <div class="box1" style="background-color: blue; height: 50%;"></div>
        <div class="box1" style="background-color: green;  height: 50%;"></div>
        <div class="box1" style="background-color: yellow;  height: 50%;"></div>
        <div class="box1" style="background-color: orange; height: 50%;"></div>
      </div>
    </div>
  </div>
  <div class="container-2">
  </div>
</body>

</html>

htmlcssflexbox

Answer №1

The issue you are experiencing is caused by the inline CSS setting height:50% for .box1 within #box, resulting in a vertical size of 200% in mobile view, overlapping with .container-2. To resolve this, adjust the height to 25% in mobile view.

body {
  margin: 0;
  width: 100%;
}
.container {
  width: 100%;
  height: 100vh;
  background-color: rgb(152, 152, 152);
}
.container-2 {
  width: 100%;
  height: 100vh;
  background-color: rgb(46, 6, 6);
}
.box-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}
.box1 {
  background-color: rgb(65, 186, 186);
  width: 50%;
  height: 100%;
}
.box2 {
  background-color: rgb(92, 191, 124);
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
#box .box1 {
  height: 50%
}
#box .box1:nth-child(3n+1) {
  background: blue
}
#box .box1:nth-child(n+2):nth-child(-n+3) {
  background: red
}
@media (max-width: 600px) {
  #box .box1 {
    height: 25%
  }
  .box1 {
    background-color: rgb(65, 186, 186);
    width: 100%;
    height: 50%;
  }
  .box2 {
    background-color: rgb(92, 191, 124);
    width: 100%;
    height: 50%;
  }
}
<div class="container">
          <div class="box-container">
            <div class="box1">

            </div>
            <div class="box2" id="box">
              <div class="box1"></div>
              <div class="box1"></div>
              <div class="box1"></div>
              <div class="box1"></div>
            </div>
          </div>
        </div>
        <div class="container-2">
      </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Should you stick with pre-defined styles or switch to dynamic inline style changes?

I am currently developing a custom element that displays playing cards using SVG images as the background. I want to make sure that the background image changes whenever the attributes related to the card's suit or rank are updated. From what I under ...

javascripthtmlcssweb-componentcustom-element

Display a label upon hovering over an image

Is there a way to create an effect where upon hovering over an image, a pop-up image is displayed like this: https://i.sstatic.net/OloUH.png Any suggestions on how I can achieve this using HTML and CSS? Thanks in advance! ...

htmlcss

Tips for aligning all positioned elements in a div

I am trying to center absolute items inside my .child_div element with a green background. How can I do this properly? .parent_div { position: relative; background: lightgreen; width: 1200px; margin: auto; } .child_div { position: relative; ...

htmlcss

Are DOM Events compatible with ajax-loaded content that cannot be unloaded?

How should events be managed with ajax-loaded content that can be hidden or displayed? I have created a sidebar in HTML that toggles visibility on click, along with two pages that are loaded using ajax. When the sidebar is hidden or displayed, I need to ...

javascriptjqueryhtmlajax

Sending data between two HTML templates in Django

Currently working on a web project with Django, still learning the ropes of Django. I'm facing an issue that has me stumped: I need to retrieve user input from one HTML search box and show it on another HTML page. This is the code for my initial ...

htmldjangodjango-viewsdjango-formsdjango-templates

Implementing selective image loading with HTML and angularJS

This image reveals the issue at hand Within this HTML code snippet, some of my images are displaying on the webpage while others are not. How can I go about resolving this? <img src="img/uploadFiles/{{room.imageLocation.split('//')[6]}}/{{ro ...

htmlangularjsangular-ui-bootstrap

There is a slight misalignment when trying to horizontally center a character within a div

I've experimented with various methods like using a px width or em widths. I've attempted nesting a span and trying different styles such as text-align:center or margin:0 auto. I can manage to center either the R or the S, but struggling to get ...

css

Images in Chrome are shivering when animated at unconventional positions

I am attempting to create a masking animation that reveals an image from its center. The animation is working well, but I have encountered a problem in Chrome where the revealed content shakes. Here is an example on jsfiddle: http://jsfiddle.net/BaKTN/ I ...

javascriptjquerycssgoogle-chromejquery-animate

Tips for aligning the timing of two CSS animations

I'm struggling to achieve a synchronized CSS animation where a progress bar fills up and a background changes simultaneously. For example, I want the progress bar to fill in 5000ms, with the background image changing every 5000ms as well. Despite se ...

css

Developing a user-friendly widget for a website that is not optimized for mobile devices

Here's the backstory: I'm currently in the process of creating a mobile-friendly widget for my clients. Unfortunately, they have web pages that are not optimized for mobile devices, and it doesn't seem like that will change anytime soon. Th ...

javascriptjqueryhtmlcssmobile

Tips for generating an HTML table in FPDF

I'm new here and facing a challenge converting an HTML table using fpdf. Below is my HTML code: <html> <body> <table border=1 align=center> <tr> <tr> <td>&nbsp;</td> <td>PO1</td> <td>PO ...

htmloraclefpdf

Displaying a hidden div using the jQuery .each() method

Attempting to validate a form using jQuery, the goal is to target all form fields with class="required" and utilize the .each() function to verify if the field is empty. If it is empty, a hidden div positioned relative to the field should be displayed. An ...

javascriptjqueryhtmlcss

Having trouble fetching information from form in a basic node.js program

Hey, so I'm not exactly a pro at backend development, but I gave it a shot and came up with this straightforward program: Here's my HTML file: <!DOCTYPE html> <head></head> <body> <form action = "http://lo ...

htmlnode.jsforms

Tips on positioning the text next to the image

You have created an HTML page with an article, but the spacing between the image and text is missing in the displayed image. I need the text to be positioned beside the image to give it a unique shape. Here is the HTML code: /* Start content Article . ...

htmlcss

Avoiding line breaks for a div positioned on the right within a flexible container

My current design consists of a red bar inside a container that is positioned between two black boxes. The size of the boxes remains fixed, while the red bar and container are both based on percentages. I am aiming to decrease the size of both the contain ...

htmlcss

HTML 5 functions properly when loaded directly as a .html file, but encounters issues when hosted on either a Django or Node

I'm having trouble getting a video to play on a webpage. Initially, I followed a standard example I found online by using the following code: <video src='video.mp4' controls></video> When I open the .html file in Safari and dou ...

djangonode.jshtmlvideo

Determining Text Color Based on Background Hue

Is it possible to create a div that dynamically changes text color based on the background color surrounding it? I want the text to switch between two different colors, with the font color being the opposite of the background color. For example, black text ...

htmlcsscolorsmix-blend-mode

Displaying inner arrays in an Angular2 MatTable

Welcome to my initial post on Stack Overflow, where I hope to communicate my query clearly. I am currently attempting to develop a table with dynamic columns. However, I am encountering difficulty in comprehending how to bind matColumnDef to a specific el ...

htmlangulartypescripthtml-tableangular-material

When a user clicks on an anchor tag, the corresponding value of the checked item is then returned

I have 3 sets of radio buttons. When a specific anchor with the "round" class is clicked, two actions should occur: The associated set of radio buttons needs to become visible The value of the checked input for that element should be returned. I am ...

javascripthtmlinputradio-button

Could you tell me how to determine the height of a page when converting it to a PDF?

I am facing a challenge trying to render a dynamic content PDF using puppeteer and react. The layouting is handled in Material UI for react, so using page-break-before:always is not feasible as it conflicts with the flex grid layout. My goal is to determin ...

javascripthtmlreactjspdfmaterial-ui