Search code examples
htmlcsstwitter-bootstrapmedia-queries

Resize div that is inside of another bootstrap div

I have a div that displays some products inside a slider, just like the picture below:

Products slider

When the screen is resized, the media queries work and the content is rearranged:

Products slider resized

The problem happens when the div containing the products slider is inside of a bootstrap div col-lg-x. For instance, a picture of whats happening when it's inside of a div.row>div.col-lg-8 (the images are cut and content is not rearranged as it happens when resizing the screen):

Products slider broken

The div has the following html:

    #productSlider .MS-content .item {
        display: inline-block;
        width: 20%;
        position: relative;
        vertical-align: top;
        overflow: hidden;
        height: 100%;
        white-space: normal;
    }
    @media screen and (max-width: 1200px) {
        #productSlider .MS-content .item {
            width: 25%;
        }
    }
    @media screen and (max-width: 991px) {
        #productSlider .MS-content .item {
            width: 33.3333%;
        }
    }
    @media screen and (max-width: 768px) {
        #productSlider .MS-content .item {
            width: 50%;
        }
    }
    @media screen and (max-width: 575px) {
        #productSlider .MS-content .item {
            width: 100%;
        }
        .sliderHeading {
            font-size: 18px !important;
            margin: 30px 0 20px !important;
        }
    }
    
    img {
    border: 1px solid black;
    }
  <div
      class="block"
      style="padding: 0 50px; position: relative; margin-bottom: 40px;"
    >
      <div id="productSlider" class="" style="position: relative;">
        <div
          class="MS-content"
          style="white-space: nowrap; overflow: hidden; margin: 0px;"
        >
          <div class="item">
            <div style="background-color: #fff; padding: 18px; margin: 0 8px;">
              <a style="text-decoration: none; color: #000" href="#">
                <img
                  style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;"
                  src="./product.png"
                />
                <h2>
                  My product title
                </h2>
              </a>
            </div>
          </div>
          <div class="item">
            <div style="background-color: #fff; padding: 18px; margin: 0 8px;">
              <a style="text-decoration: none; color: #000" href="#">
                <img
                  style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;"
                  src="./product.png"
                />
                <h2>
                  My product title
                </h2>
              </a>
            </div>
          </div>
          <div class="item">
            <div style="background-color: #fff; padding: 18px; margin: 0 8px;">
              <a style="text-decoration: none; color: #000" href="#">
                <img
                  style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;"
                  src="./product.png"
                />
                <h2>
                  My product title
                </h2>
              </a>
            </div>
          </div>
          <div class="item">
            <div style="background-color: #fff; padding: 18px; margin: 0 8px;">
              <a style="text-decoration: none; color: #000" href="#">
                <img
                  style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;"
                  src="./product.png"
                />
                <h2>
                  My product title
                </h2>
              </a>
            </div>
          </div>
          <div class="item">
            <div style="background-color: #fff; padding: 18px; margin: 0 8px;">
              <a style="text-decoration: none; color: #000" href="#">
                <img
                  style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;"
                  src="./product.png"
                />
                <h2>
                  My product title
                </h2>
              </a>
            </div>
          </div>
        </div>
        <div class="MS-controls">
          <button
            class="MS-left"
            style="background-color: rgba(255, 255, 255, 0.77); padding: 15px; box-shadow: rgba(179, 179, 179, 0.32) 0px 0px 10px 2px; width: 65px; height: 65px; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); left: -28px; border-radius: 4px; border: 0px;"
          >
            <a
              ><img
                src="./arrow-left.png"
                alt=""
                style="max-width: 22px;"
            /></a></button
          ><button
            class="MS-right"
            style="background-color: rgba(255, 255, 255, 0.77); padding: 15px; box-shadow: rgba(179, 179, 179, 0.32) 0px 0px 10px 2px; width: 65px; height: 65px; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); right: -28px; border-radius: 4px; border: 0px;"
          >
            <a
              ><img
                src="./arrow-right.png"
                alt=""
                style="max-width: 22px;"
            /></a>
          </button>
        </div>
      </div>
    </div>

And it breaks when its put inside of

<div class="row">
    <div class="col-lg-8">
        ... slider code here
    </div>
</div>
Solution

  • just remove width:20% from #productSlider .MS-content .item.

      #productSlider .MS-content .item {
      display: inline-block;
       width:20%; /*remove this */
      position: relative;
      vertical-align: top;
      overflow: hidden;
      height: 100%;
      white-space: normal;
    }

    And remove the below given css:

    @media screen and (max-width: 1200px) {
  #productSlider .MS-content .item {
    width: 25%;
  }
}

@media screen and (max-width: 991px) {
  #productSlider .MS-content .item {
    width: 33.3333%;
  }
}


    #productSlider .MS-content .item {
  display: inline-block;
  position: relative;
  vertical-align: top;
  overflow: hidden;
  height: 100%;
  white-space: normal;
}



@media screen and (max-width: 768px) {
  #productSlider .MS-content .item {
    width: 50%;
  }
}

@media screen and (max-width: 575px) {
  #productSlider .MS-content .item {
    width: 100%;
  }
  .sliderHeading {
    font-size: 18px !important;
    margin: 30px 0 20px !important;
  }
}
.row{
margin:0px !important;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="row">
    <div class="col-lg-8">


<div class="block" style="padding: 0 50px; position: relative; margin-bottom: 40px;">
  <div id="productSlider" class="" style="position: relative;">
    <div class="MS-content" style="white-space: nowrap; overflow: hidden; margin: 0px;">
      <div class="item">
        <div style="background-color: #fff; padding: 18px; margin: 0 8px;">
          <a style="text-decoration: none; color: #000" href="#">
            <img style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;" src="https://dummyimage.com/600x400/000/fff" />
            <h2>
              My product title
            </h2>
          </a>
        </div>
      </div>
      <div class="item">
        <div style="background-color: #fff; padding: 18px; margin: 0 8px;">
          <a style="text-decoration: none; color: #000" href="#">
            <img style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;" src="https://dummyimage.com/600x400/000/fff" />
            <h2>
              My product title
            </h2>
          </a>
        </div>
      </div>
      <div class="item">
        <div style="background-color: #fff; padding: 18px; margin: 0 8px;">
          <a style="text-decoration: none; color: #000" href="#">
            <img style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;" src="https://dummyimage.com/600x400/000/fff" />
            <h2>
              My product title
            </h2>
          </a>
        </div>
      </div>
      <div class="item">
        <div style="background-color: #fff; padding: 18px; margin: 0 8px;">
          <a style="text-decoration: none; color: #000" href="#">
            <img style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;" src="./product.png" />
            <h2>
              My product title
            </h2>
          </a>
        </div>
      </div>
      <div class="item">
        <div style="background-color: #fff; padding: 18px; margin: 0 8px;">
          <a style="text-decoration: none; color: #000" href="#">
            <img style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;" src="https://dummyimage.com/600x400/000/fff" />
            <h2>
              My product title
            </h2>
          </a>
        </div>
      </div>
    </div>
    <div class="MS-controls">
      <button class="MS-left" style="background-color: rgba(255, 255, 255, 0.77); padding: 15px; box-shadow: rgba(179, 179, 179, 0.32) 0px 0px 10px 2px; width: 65px; height: 65px; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); left: -28px; border-radius: 4px; border: 0px;">
        <a
          ><img
            src="./arrow-left.png"
            alt=""
            style="max-width: 22px;"
        /></a></button
      ><button
        class="MS-right"
        style="background-color: rgba(255, 255, 255, 0.77); padding: 15px; box-shadow: rgba(179, 179, 179, 0.32) 0px 0px 10px 2px; width: 65px; height: 65px; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); right: -28px; border-radius: 4px; border: 0px;"
      >
        <a
          ><img
            src="./arrow-right.png"
            alt=""
            style="max-width: 22px;"
        /></a>
      </button>
    </div>
  </div>
</div>
</div>

</div>