asked on

css style not cascading?

Hello,

I have a responsive layout using media queries with a Joomla template. The template has a custom css file that loads at the end of the stylesheet loads to overwrite whatever is necessary. My full-screen styling of H tags is like so and works great:

@media (min-width: 1315px) {
      h1 .contentheading {font-size:2em;}
      h2 {font-size:1.8em;}
      h3 {font-size:1.4em;}
      h5 {
      font-size:1em;
      line-height:.8em;
}

}

All font sizes are shown as expected.

However, the large size just below full-screen has precisely the same rules:

@media only screen and (min-width: 1075px) and (max-width: 1314px){
      h1 .contentheading {font-size:2em;}
      h2 {font-size:1.8em;}
      h3 {font-size:1.4em;}
      h5 {
      font-size:1em;
      line-height:.8em;
}

}

...but the h3 tag is using a strange rule from the main sheet to go to 175% - I don't know why this doesn't happen at full-screen, and I'm not sure how to overrule this errant style.

Any ideas?

The best site example page is http://coloradoweb3.com/about-us/contact-us

Thank you

Bill

Scott Fell

Just add !important like

h3 {font-size:1.4em!important;}

Scott Fell

You also need to check your html errors http://validator.w3.org/check?uri=http%3A%2F%2Fcoloradoweb3.com%2Fabout-us%2Fcontact-us&charset=%28detect+automatically%29&doctype=Inline&group=0

and these files are not loading

Failed to load resource: the server responded with a status of 404 (Not Found) http://coloradoweb3.com/libraries/gantry/assets/jui/fonts/fontawesome-webfont.woff

Failed to load resource: the server responded with a status of 404 (Not Found) http://coloradoweb3.com/templates/rt_cerulean/fonts/casper-webfont.woff

Gary

Change
body h1, body h2, body h3 {

to
h1, h2, h3 {

Proper specifity will always take precedence.

Why all the extra markup in your headings, they are naturally bold so you don't need strong and there is no need for a span

edit
http://coding.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

Bill Henderson

ASKER

Thanks all - Padas - already tried that. It makes no difference. I've added !important back in, so you can confirm.

As far as the validator, I agree this CSS is a bit sloppy and problematic, but my stylings at full-screen work perfectly and I'm sort of at the mercy of the template developers (who make regular updates to template files, Gantry framework files, etc) so I'm trying to do my CSS customizations in the separate custom file, as instructed. So even if I knew how to fix the errors W3C gives, I'm not sure I would.

Gary - I appreciate your specificity comment, however where do you see body h1, body h2, etc? In my customer file I'm declaring h1, h2, etc - less specific. But your post made me think I should be more specific, so I tried using component-content class a la:

.component-content h3 {font-size:1.4em!important;}

as well as trying

.module-surround h3 {font-size:1.4em!important;}

Still nothing.

Any ideas?

Thanks again for your time

Bill

Bill Henderson

ASKER

BTW - I just confirmed that adding !important is working for all other size ranges except the one in question. I added red coloring to all the other media query size ranges and works great.

I then confirmed the syntax of the one problem section, and it all appears correct. But somehow, at that one size, the 175% and even the text color are over-ridden from elsewhere.

What the...

Gary

mediaqueries.css line 1.

Is it the 175% or 1.4em you want applied?

Bill Henderson

ASKER

1.4em

So in the interest of keeping my changes in my custom css file, I'm trying to use:

body h3 {font-size:1.4em!important;color:#FF0000!important;}

(coloring just to remove any ambiguity right now)

Still nothing. Or am I not getting what you are suggesting?

Bill

ASKER CERTIFIED SOLUTION

Gary

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Scott Fell

it seems to work for me for the style sheet http://coloradoweb3.com/templates/rt_cerulean/css/rt_cerulean-custom.css on line 209 using chrome

/* Large Display */

@media (min-width: 1315px) { 
	h1, .contentheading  {font-size:2em;}
	h2 {font-size:1.8em;}
	h3 {font-size: 2em!important;}
	h5 {
	font-size:1em;
	line-height:.8em;
}

Open in new window

or line 182

/* Desktop */

@media only screen and (min-width: 1075px) and (max-width: 1314px){ 
	h1, .contentheading  {font-size:1.9em;}
	h2 {font-size:1.7em;}
	body h3 {font-size: 2em!important;}
	h5 {
	font-size:1em;
	line-height:.8em;
}

Open in new window

It's not worth trying to help you further if you don't want to look at your errors. While some errors (like missing alt tags for images) may not make a difference, other errors will. Sometimes a seemingly unrelated error gets the job done. Browsers interpret errors differently. It does seem to work on chrome and firefox.

I remember this site from a previous question and what I am seeing now is when you narrow the browser to mobile the main area (rt-container) now separates from the header rt-top-surround. Something else has changed. I remember seeing the body area have a sliding effect as the browser narrowed.

Your page references these files all missing
http://coloradoweb3.com/about-us/index.php
http://coloradoweb3.com/libraries/gantry/assets/jui/fonts/fontawesome-webfont.woff
http://coloradoweb3.com/templates/rt_cerulean/fonts/casper-webfont.woff

All of these things can make a difference.