Jc John Jc John - 3 months ago 10
CSS Question

My media query not working in mobile and i already added viewport

I have a media query in my css, but when i tried it in mobile, nothing happens. Please help me with this. My problem is in the media query, the margin of the

.custombox
is not working. Would i need to separate the media query with another css file ? Is it possible to have two css overriding bootstrap?

here is my header tag


<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/scrolling-nav.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">




here is my CSS named the scrolling-nav.css

body {
width: 100%;
height: 100%;
padding-top: 140px;
}

html {
width: 100%;
height: 100%;
}

@media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
margin:
}
.top-nav-collapse {
padding: 0;
}
.div {
text-align: justify;
text-justify: inter-word;
}
.custom-box{
margin-left: 0px !important;
margin-right: 30px !important;
}

}
@media (max-width: 480px) {
.custom-box{
margin-left: 0px !important;
margin-right: 30px !important;
}
}


.intro-section {
height: 100%;
padding-top: 50px;
font-family: Impact;
background: #fff;
padding-bottom: 40px;

}

.re-section {
height: 333%;
padding-top: 10px;
text-align: left;
background: #eee;
}

.services-section {
height: 100%;
padding-top: 20px;
text-align: left;
background: #fff;

}

.contact-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
.thumbnail {
background: #eee !important;
}
.thumbnail-img {
height:auto;
width:100%;
}
.custom-box{
margin-left: 100px !important;

}
.cust-box {
margin-left: 50px !important;
}
.img {
border-radius: 50%;
-webkit-transition: -webkit-transform .8s ease-in-out;
-moz-: -moz-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.img:hover {
-webkit-transform: rotate(360deg);
-moz-: rotate(360deg);;
transform: rotate(360deg);
}
#bgimage1 {
color: #0c00ff;

background: url(../images/solar2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#font-intro {
font-size: 16px;
font-family: arial;
text-align: left;

}
#font-blue {
color: #0c00ff;
font-family: Impact;
font-size: 25px;
}
#img1 {
transition: all .2s ease-in-out;
}
#img1:hover {
transform:scale(1.1);
}

Answer

An important flag is overriding what is set in the media query. Remove the !important flags and move the media query after all styles for .custom-box

body {
    width: 100%;
    height: 100%;
    padding-top: 140px; 
}

html {
    width: 100%;
    height: 100%;
}

@media(min-width:767px) {
    .navbar {
        padding: 20px 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }
    .top-nav-collapse {
        padding: 0;
    }
    .div {
        text-align: justify;
        text-justify: inter-word;
    }
    .custom-box{
        margin-left: 0px;
        margin-right: 30px;
    }  

}


.intro-section {
    height: 100%;
    padding-top: 50px;
    font-family: Impact;
    background: #fff;
    padding-bottom: 40px;

}

.re-section {
    height: 333%;
    padding-top: 10px;
    text-align: left;
    background: #eee;
}

.services-section {
    height: 100%;
    padding-top: 20px;
    text-align: left;
    background: #fff;

}

.contact-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}
.thumbnail {
    background: #eee !important;
}
.thumbnail-img {
     height:auto;
     width:100%;
}
.custom-box{
    margin-left: 100px;

}
.cust-box {
    margin-left: 50px;
}
.img {
    border-radius: 50%;
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -moz-: -moz-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}
.img:hover {
    -webkit-transform: rotate(360deg);
    -moz-: rotate(360deg);;
    transform: rotate(360deg);
}
#bgimage1 {
    color: #0c00ff;

     background: url(../images/solar2.jpg) no-repeat center center fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}
#font-intro {
    font-size: 16px;
    font-family: arial;
    text-align: left;

}
#font-blue {
    color: #0c00ff;
    font-family: Impact;
    font-size: 25px;
}
#img1 {
    transition: all .2s ease-in-out;
}
#img1:hover {
    transform:scale(1.1);
}   

@media (max-width: 480px) {
    .custom-box{
        margin-left: 0px;
        margin-right: 30px;
    }
}