How to remove left margin from DIV when below 767px width
Question
I have a simple one for someone here. I have a div that uses the bootstrap columns :
<div class="current-plan col-sm-4 col-xs-12">
</div>
The CSS for current-plan :
.current-plan{
margin-left: 5%;
display: inline-block;
background-color: #000;
height: 150px;
}
I want the 5% margin left to disappear when the screen goes below 767px width.
I've tried using @media queries but it doesn't seem to be interacting with it.
The div is also nested inside of Bootstraps container div :
<div class="container">
<div class="current-plan col-sm-4 col-xs-12">
</div>
</div>
2 answers
solution1
1 ACCPTED 2015-10-21 01:11:52
Try to add !important declaration :
@media screen and (max-width: 766px) {
.current-plan{
margin-left: 0px !important;
}
}
You can also use Javascript by adding this inside your <body> :
<script>
var mq = window.matchMedia( "(max-width: 766px)" );
if (mq.matches) {
var el = document.getElementsByClassName("current-plan");
for(var i = 0; i < el.length; i++) {
elems[i].style.marginLeft = "0px";
}
}
</script>
Or edit styles directly in Bootstrap CSS.
solution2
0 2015-10-21 01:11:34
Add more selectors to current-plan:
@media (max-width: 767px) {
.container .current-plan {
margin-left: 0 !important;
}
}
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.