Writing over existing class for h1 subtitle

You can’t put javascript in a CSS file… so that’s one problem.

Also, you need to put that code in a media query – try this:

@media screen and (min-width: 600px) {
   .entry-header .entry-title {
		font-size: 22px;
		font-size: 1.571428571rem;
                put other styles here;

	}
}

The above is the existing styles, so adjust those sizes to what you want and add the color and font.

Did you add the font via plugin? That’s probably the easiest way with Google Fonts.

Wow, thanks for your quick reply!

Few things to clarify:

1. Instead of adding javascript to my css, I should simply add in the font with a Google Font plugin? This way it will read properly?

2. I need to add a media query so that it’s visible on all devices, like iPhones or tablets? Will this enable me to write over the existing code?

3. I’m also wondering where to access the html. I’ve tried understanding where to find it, but aside from finding the html versions of posts, widgets, and pages, I can’t for the life of me.

Thanks!
Lauren

#1 – yes.

#2 – try just adding what I posted – take out what you have.

#3 – php based websites don’t have static HTML pages – they are generated dynamically in the browser when the site is loaded. So it’s a bit different – if you’re trying to change something that’s not in the content, you generally have to modify a template php file or something else, depending on the specifics.

So I added this to my css:

@media screen and (min-width: 600px) {
   .entry-header .entry-title {
		font-size: 22px;
		font-size: 1.571428571rem;
                font-family: 'Quicksand', sans-serif;
		font-colour: #00bdb6

	}
}

But nothing seems to have changed. I did add the Google font plugin.

You need to remove what you had added:

#content h1 {
    color: #00BDB6;
    font-family: 'Yanone+Kaffeesatz',sans-serif;
}

Also, you need to change those numbers in what you added – the numbers there right now are the existing size.

It looks like the font has changed but not the colour. Perhaps because I added a custom code to my google font plugin?

#container p { font-family: 'Quicksand', sans-serif; font-size: 120%; font-colour: #00bdb6;}

Try color not font-colour

That code also won’t apply to the headers…

I see. Now I have

#container p { font-family: 'Quicksand', sans-serif; font-size: 120%; colour: #00bdb6;}

in my custom code in the plugin and

@media screen and (min-width: 600px) {
.entry-header .entry-title {
font-size: 22px;
font-family: ‘Quicksand’, sans-serif;
colour: #00bdb6

}
}

in the main css file.

I would not put any CSS in the plugin – you’ll go nuts with it in more than one place.

Plus that code you have in the plugin is only going to affect paragraph text – is that what you want?

You also have to use “color” not “colour” :).

Hahaha the big problem I’ve been having is because of a little difference of spelling? Who knew it was only me being Canadian…

LOL – yeah, unfortunately code is quite “stupid” in that sense.

Still doesn’t seem to help. I checked out the element and this is what it said:

media="all"
style.css:42@media screen and (min-width: 600px)
.entry-header .entry-title {
font-size: 22px;
font-family: 'Quicksand', sans-serif;
color: #00bdb6;
}

but size and color were strike-throughs. I don’t quite understand why one is accepted (font family) but not the other two.