'Problem with responsive css grid. Some "cells" of the grid aren't responsive

I have a strange problem with my css grid. I have a 2 columns grid:

.main-container {
  top: 0;
  display: grid;
  background-image: url('https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/wal.png');
  background-attachment: fixed;
  grid-template-columns: 50% 50%;
  box-sizing: border-box;
  font-size: 1.5rem;
  z-index: -1;
}

@media all and (max-width: 890px) {
  .main-container {
    grid-auto-flow: row dense;
    grid-auto-columns: 1fr;
  }
  .main-container div {
    grid-column: 1 / span 3;
  }
}
<div class="main-container">
  <div class="item1 cnt">
    <video id="vid" src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/coffee1.mp4" width="1920" height="1080" autoplay loop muted type="video/mp4"> </video>
  </div>
  <div class="item2 cnt">
    <p style="font-size:50px; color:white;"> Join Us! </P>
    <button type="button" class="btn btn-outline-warning" style="font-family:forum; font-weight:bold; background-color:#1f1f1f; border-radius: 25px; color:#edbd87; font-size:40px; border: 2px solid #edbd87;" onclick="location.href='http://arvanjobs.com/candidates'">SEND YOUR CV</button>
  </div>
  <div class="item3 cnt">
    <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/LOGO.png" />
  </div>
  <div class="item4 cnt">
  </div>
  <div class="item5 cnt">
    <h4>WHO WE ARE?</h4>
    <p>
      ArvanJobs is above all peace of mind. It is a new way of working, of traveling, of training, of advancing in your career. Whether you are a company looking for workers or you are looking for a new job opportunity, ArvanJobs will always be by your side,
      selecting the best workers and the best companies that will boost your career.
    </p>
  </div>
  <div class="item6 cnt">
    <h4>WHY WORK WITH US?</h4>
    <p>
      For our personal treatment, our advice, and above all for our experience working in hotels in numerous countries. Because we know how difficult it is to take that step of daring to work in a foreign country. Because we know how hard it is to find the
      right staff.
    </p>
  </div>
  <div class="item7 cnt">
  </div>
  <div class="item8 cnt">
    <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/arvan3.jpg">
  </div>
  <div class="item9 cnt">
    <h4>HOW WE WORK?</h4>
    <p>
      All candidates are interviewed by staff who have worked in hotels, not offices. The same happens with our clients who have to satisfy a series of criteria and guarantees for the worker to work with us.</p>
  </div>
  <div class="item13 cnt">
    <div class="item13-1">
      <p>APPLY NOW TO GET STARTED</p>
    </div>
    <div class="item13-2">
      <button type="button" class="btn btn-outline-warning" style="font-family:forum; font-weight:bold; background-color:#967b5d; border-radius: 25px; color:#edbd87; font-size:40px; border: 2px solid #edbd87;" onclick="location.href='http://arvanjobs.com/candidates'">APPLY NOW</button>
    </div>
  </div>
  <div class="item10 cnt">
    <div class="container" style="width:100vw; max-width: max-content; padding-left: 0px; padding-right: 0px;">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators 
                <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
                <li data-target="#myCarousel" data-slide-to="3"></li>
                </ol>
    -->
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="item active">
            <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/0.png" alt="Reception" style="width:100vw;">
            <div class="carousel-caption">
              <h3 style="color:white;">Chefs</h3>
              <p>LA is always so much fun!</p>
            </div>
          </div>
          <div class="item">
            <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/1.png" alt="housekeeping" style="width:100vw;">
            <div class="carousel-caption">
              <h3 style="color:white;">Waiters</h3>
              <p>Thank you, Chicago!</p>
            </div>
          </div>
          <div class="item">
            <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/2.png" alt="chefs" style="width:100vw;">
            <div class="carousel-caption">
              <h3 style="color:white;">Housekeeping</h3>
              <p>We love the Big Apple!</p>
            </div>
          </div>
          <div class="item">
            <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/3.png" alt="awijr" style="width:100vw;">
            <div class="carousel-caption">
              <h3 style="color:white;">Reception</h3>
              <p>We love the Big Apple!</p>
            </div>
          </div>
        </div>
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
  <div class="item11 cnt">
    <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/arvan2.jpg" />
  </div>
  <div class="item12 cnt">
    <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/arvan2-1.png" />
  </div>

I encounter this when reaching the 400~ px. mark (I have no css for this range of width): enter image description here

Its like the .main-container its getting a responsive, and some items from inside it, getting other different responsive. I don't understand, and my CSS is very long to post all of it here. You can see this mess at https://arvanjobs.com

htmlcssresponsive-design


Solution 1:[1]

It's much easier to add in complexity with media queries than remove it. So have your mobile styles in your regular CSS, and then add in what you want to happen on larger screen widths.

* {
  max-width: 100%;
}

.main-container {
  top: 0;
  display: grid;
  background-image: url('https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/wal.png');
  background-attachment: fixed;
  grid-auto-flow: row dense;
  grid-auto-columns: 1fr;
  box-sizing: border-box;
  font-size: 1.5rem;
  z-index: -1;
}

@media all and (min-width: 890px) {
  .main-container {
    grid-template-columns: 50% 50%;
  }
}
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
  <div class="main-container">

    <div class="item1 cnt">
      <video id="vid" src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/coffee1.mp4" autoplay loop muted type="video/mp4"> </video>
    </div>
    <div class="item2 cnt">
      <p style="font-size:50px; color:white;"> Join Us! </P>
      <button type="button" class="btn btn-outline-warning" style="font-family:forum; font-weight:bold; background-color:#1f1f1f; border-radius: 25px; color:#edbd87; font-size:40px; border: 2px solid #edbd87;" onclick="location.href='http://arvanjobs.com/candidates'">SEND YOUR CV</button>
    </div>
    <div class="item3 cnt">
      <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/LOGO.png" />
    </div>
    <div class="item4 cnt">

    </div>
    <div class="item5 cnt">
      <h4>WHO WE ARE?</h4>
      <p>
        ArvanJobs is above all peace of mind. It is a new way of working, of traveling, of training, of advancing in your career. Whether you are a company looking for workers or you are looking for a new job opportunity, ArvanJobs will always be by your side,
        selecting the best workers and the best companies that will boost your career.
      </p>
    </div>
    <div class="item6 cnt">
      <h4>WHY WORK WITH US?</h4>
      <p>
        For our personal treatment, our advice, and above all for our experience working in hotels in numerous countries. Because we know how difficult it is to take that step of daring to work in a foreign country. Because we know how hard it is to find the
        right staff.
      </p>
    </div>
    <div class="item7 cnt">

    </div>
    <div class="item8 cnt">
      <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/arvan3.jpg">
    </div>
    <div class="item9 cnt">
      <h4>HOW WE WORK?</h4>
      <p>
        All candidates are interviewed by staff who have worked in hotels, not offices. The same happens with our clients who have to satisfy a series of criteria and guarantees for the worker to work with us.</p>
    </div>
    <div class="item13 cnt">
      <div class="item13-1">
        <p>APPLY NOW TO GET STARTED</p>
      </div>
      <div class="item13-2">
        <button type="button" class="btn btn-outline-warning" style="font-family:forum; font-weight:bold; background-color:#967b5d; border-radius: 25px; color:#edbd87; font-size:40px; border: 2px solid #edbd87;" onclick="location.href='http://arvanjobs.com/candidates'">APPLY NOW</button>
      </div>
    </div>
    <div class="item10 cnt">

      <div class="container" style="max-width: max-content; padding-left: 0px; padding-right: 0px;">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <!-- Indicators 
            <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
            </ol>
-->
          <!-- Wrapper for slides -->
          <div class="carousel-inner">

            <div class="item active">
              <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/0.png" alt="Reception">
              <div class="carousel-caption">
                <h3 style="color:white;">Chefs</h3>
                <p>LA is always so much fun!</p>
              </div>
            </div>

            <div class="item">
              <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/1.png" alt="housekeeping">
              <div class="carousel-caption">
                <h3 style="color:white;">Waiters</h3>
                <p>Thank you, Chicago!</p>
              </div>
            </div>

            <div class="item">
              <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/2.png" alt="chefs">
              <div class="carousel-caption">
                <h3 style="color:white;">Housekeeping</h3>
                <p>We love the Big Apple!</p>
              </div>
            </div>

            <div class="item">
              <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/3.png" alt="awijr">
              <div class="carousel-caption">
                <h3 style="color:white;">Reception</h3>
                <p>We love the Big Apple!</p>
              </div>
            </div>

          </div>

          <!-- Left and right controls -->
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
    <div class="item11 cnt">
      <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/arvan2.jpg" />
    </div>
    <div class="item12 cnt">
      <img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/arvan2-1.png" />
    </div>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Zach Jensz

Related Questions