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> <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> <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> <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> <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> <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> <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.
1 answers
solution1
2 2017-09-25 11:14:36
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">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.