CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmedia-queries
Jc John
Jc John

Reputation: 1859

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);
}

Upvotes: 1

Views: 57

Answers (1)

depiction
depiction

Reputation: 819

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;
    }
}

Upvotes: 1

Related Questions