Making H1 tags responsive

[colin45]

Hi, I think this is a simple thing to do but I must be missing something, I want the H1 tags to reduce in size when the site is opened up on a mobile device. I’m using this css:

@media (min-width: 420px) {
h1 {
font-size: 30px;
}
}

But it doesn’t have any effect as I think another bit of css is overriding it.

The site is built in Wordpress using a child theme and the css is placed in the child theme style sheet. the Site is: http://dev.londonhr.org/membership/

With the word Membership being the H1 tag, any help would be much appricated

[RyanReese]

You have your media query in style.css, which is called BEFORE another h1 {} CSS rule (font-size: 75px);

It’s basically just being overridden. That’s why you don’t see it in action .

[coothead]

Hi there colin45,

if you want a reaction as the page width decreases then do it like this…

@media ( max-width: 26.25em ) {
h1 {
    font-size: 1.875em;
  }
 }

coothead

[colin45]

Thanks Guys, I’ve tried that and still the same, I think Ryan is right and it’s in the wrong order but not sure how to change the stacking order, I always thought the theme style sheet would overwrite everything else, bit confused

[PaulOB]

At line 944 in the source of your page you have this rule that wins out.

.h1{font-family:"Open Sans";font-weight:400;font-style:normal;color:#222585;font-size:75px;}

Your media query needs to come later in the document than that rule. Its no good linking to a css file earlier as the latter wins out unless you change specificity.

You need to heed both Ryans and cootheads advice as you have both wrong

[colin45]

Thanks Guys, great job I’ve worked it out thanks to the great help much appreciated:)

[onebasemediauk]

Thank you guys for sharing these tips as media query needs to come later in the document than that rule and because of that the problem persists.So few changes mention here will fix this issue with ease.