Potion Potion - 6 days ago 6
CSS Question

CSS Mobile Definition Not Applying?

I made a site here. It works great on all screens except mobile where the slogan is too large. So i added a mobile css definition for the slogan "Always coding and brewing up something good" but on my phone it does nothing? I am using bootstrap but only with the grid and responsive elements. The css I applied is the below in question is:



@media (max-width: 480px) {
.grabber{
font-size: 12px;
}

}




Answer

You defined in your stylesheet.css a following order of styles:

@media (max-width: 480px) { 
    .grabber{
        font-size: 12px;
    }
}
.grabber{
    color: #3498db;
    font-size: 2em;
    font-family: 'black_roseregular', Arial, sans-serif;
}

and due to processing css-rules consequentially latest font size style applied to .grabber will be font-size: 2em;. All you need is to swap these statements like this:

.grabber{
    color: #3498db;
    font-size: 2em;
    font-family: 'black_roseregular', Arial, sans-serif;
}
@media screen and (max-width: 480px) { 
    .grabber{
        font-size: 12px;
    }
}
Comments