I am trying to reduce the size of some titles of my commerce in responsive version. I have tried a bit of css but nothing has worked. At the moment, I have the following for the main slider text:
@media only screen and (max-width: 600px) {.zphero-banner-style-11 .zpheading, .zshero-banner-style-11 .zpheading {font-size: 22px;;}}
This is my web enter image description here
Where am I going wrong?
Your css path currently looks like this.
@media only screen and (max-width: 600px) {
.zphero-banner-style-11 .zpheading, .zshero-banner-style-11 .zpheading {
font-size: 22px;;
}
}
Without the associated HTML its hard to say but my initial guess is the classes that are already applied on it have greater importance than your new media query. I would try this adding !important and if it doesnt work make your selector more specific.
@media (max-width: 600px) {
.zphero-banner-style-11 .zpheading, .zshero-banner-style-11 .zpheading {
font-size: 22px !important;
}
}
fun things to note about selector importance:
100 points for IDs
10 points for classes and pseudo-classes
1 point for tag selectors and pseudo-elements
Note: If the element has inline styling that automatically wins (1000 points)
Among two selector styles browser will always choose the one with more weight. Order of your stylesheets only matters when priorities are even - that's why it is not easy to override Bootstrap.
currently your media query css selectors have a value of 20 points because there are 2 class names pointing to the change
CSS declarations marked as important override any other declarations within the same cascade layer and origin. Although technically, !important has nothing to do with specificity, it interacts directly with specificity and the cascade. It reverses the cascade order of stylesheets. Not the best practice but it works well often