col-xs not working for media screen less than 768px

Question

body {
  margin-left: 50px !important;
  margin-right: 50px !important;
}

.section {
  background: rgba(255, 255, 255, 0.69);
  height: 200px;
  border: 1px solid #000;
}

.outer {
  display: table;
  width: 100%;
  height: 100vh;
}

.inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.parent-div {
  margin: 0 auto;
  width: 82%;
}

.table-parent {
  display: table;
}

.table-child {
  display: table-cell;
  vertical-align: middle;
}

.section:hover {
  color: #ececeb;
  transition: all 0.3s;
  cursor: pointer;
}

.table-child .fa {
  padding-right: 6px !important;
}

.section:hover .item-overlay.bottom {
  bottom: 0;
}

.item-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  width: 100%;
  -moz-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  -webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}

.item-overlay.bottom {
  bottom: 100%;
}

.table-child p {
  display: inline-block;
  text-rendering: auto;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}

a {
  text-decoration: none;
  color: #333 !important;
}

#AddProduct {
  display: inline-block;
}

@media screen and (max-width: 767px) {
  .col-xs-12 {
    width: 100% !important;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body>

  <div class="row outer">
    <div class="row inner">

      <div class="clearfix parent-div">
        <a data-toggle="modal" data-target="#myModal">
          <div class="col-md-4 col-sm-6 col-xs-12 section table-parent">
            <div class="item-overlay bottom"></div>
            <h4 class="table-child"><i class="fa fa-plus-circle" aria-hidden="true"></i>&nbsp;
              <p>ADD A PRODUCT</p>
            </h4>
          </div>
        </a>

        <a>
          <div class="col-md-4 col-sm-6 col-xs-12 section table-parent">
            <div class="item-overlay bottom"></div>
            <h4 class="table-child"><i class="fa fa-pencil" aria-hidden="true"></i>&nbsp;
              <p>EDIT A PRODUCT</p>
            </h4>
          </div>
        </a>

        <a data-toggle="modal" data-target="#removeModal">
          <div class="col-md-4 col-sm-6 col-xs-12 section table-parent">
            <div class="item-overlay bottom"></div>
            <h4 class="table-child"><i class="fa fa-minus-circle" aria-hidden="true"></i>&nbsp;
              <p>REMOVE A PRODUCT</p>
            </h4>
          </div>
        </a>

        <div class="col-md-4 col-sm-6 col-xs-12 section table-parent">
          <div class="item-overlay bottom"></div>
          <h4 class="table-child"><i class="fa fa-bars" aria-hidden="true"></i>&nbsp;
            <p>USER'S LIST</p>
          </h4>
        </div>

        <div class="col-md-4 col-sm-6 col-xs-12 section table-parent">
          <div class="item-overlay bottom"></div>
          <h4 class="table-child"><i class="fa fa-sort" aria-hidden="true"></i>&nbsp;
            <p>ORDERS</p>
          </h4>
        </div>

        <div class="col-md-4 col-sm-6 col-xs-12 section table-parent">
          <div class="item-overlay bottom"></div>
          <h4 class="table-child"><i class="fa fa-power-off" aria-hidden="true"></i>&nbsp;
            <p>LOGOUT</p>
          </h4>
        </div>

      </div>
    </div>
  </div>

</body>

I am using Bootstrap v3. The divs are not taking 100% width in mobile devices with col-xs-12. Code is working fine for medium and small screens but retaining the 50% width for screens less than 768. Here is the link to the screenshot of the behaviour. Image

Gone through all other available solutions but none worked for me.

I don't know how to put this into words but I am getting the desired output on resizing the browser window but the code doesn't seem to work on the actual device and the web inspector. Screenshot of the device Image

Additionally I tried with !important as well at the end of css but facing the same problem.

Could you please share some of the css and html please, otherwise we'd just be guessing, for a quick hack you could add `!important` after the width in `.col-xs-12` — Alessi 42, May 28 '17 at 19:08
I think the problem is the sequence off ur classes. Try this sequence xs, sm, md, lg — mastermind, May 28 '17 at 19:13
The issue might be the higher pixel density on newer iPhones. I think the answer here will help you: https://stackoverflow.com/questions/19933143/css-media-queries-pixel-density-desktop-and-mobile-devices — BSMP, May 28 '17 at 23:32
That worked perfectly! The viewport meta tag was missing. Thank you! @BSMP — Chetan Kalra, May 29 '17 at 07:50

score 2 · Answer 1 · answered Sep 25 '17 at 11:14

Taken from comment of chetan kalra and posting answer for quick reference for others. I also faced this issue and found viewport meta tag was missing. Adding below line did the trick.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

col-xs not working for media screen less than 768px

1 Answers1