I’m not sure why the media query style, which is at the bottom of the css file, is being overridden by the main styles at the top of the css page. I even tried placing the media query on the html page it’s self and it’s still being overwritten by the original style.
here is the css…
`
.banner-page-title{
font-size: 40px;
font-weight: 100;
margin-bottom: 5px;
font-style:italic;
line-height: 50px;
}
.banner-slogan{
margin-top:0px;
font-size: 34px;
line-height: 55px;
}
@media (max-width: 480px) {
.banner-page-title{
font-size: 20px !important;
}
.banner-slogan{
font-style: 16px !important;
}
}
`
here is the html
<h1 class="white shadow banner-page-title">...</h1>
<h1 class="white shadow banner-slogan">.....</h
here is a demo:
http://aaronhaas.com/waterford/frac-tanks.html