I've hit a roadblock because my @media query is functioning properly for the initial rule, but fails to work for subsequent rules.
For instance, I managed to make the "subButton" disappear when the screen size decreases below the specified width. However, I also need to reduce the h2 heading size to 2.5em (currently set at 4.5em on a desktop). Unfortunately, only the subButton is impacted by the media query when viewed on my iPhone.
Any suggestions on what might be causing this issue?
* Update * I have provided the code where I am applying the media query. Despite trying different classes and IDs, I still haven't achieved the desired result. Any additional guidance would be greatly appreciated.
/** Mobile **/
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
#subButton
{
display:none;
}
.primaryContainer h2 {
font-size: 2.5em;
}
}
HTML
<section class="contentContainer" id="primaryBackground">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 primaryContainer">
<h2>Get Rocket Ship Growth!</h2><br>
<p>Weekly Step by Step Growth Hacking<br>Guides & Actionable Insight</p>
<button><a href="#section2">Learn More ∨</a></button>
</div>
</div>
</div>
</section>