Overrule H3 to H4 in css

[RuudBergen]

The thing is i want to change the <h3> to <h4> when the screen is less than 1024px wide.

This is the html now:

<div class="heading-and-icon"><p><img alt="" src="http://www.smaac.nl/wp-content/uploads/2013/11/Icons-Disciplines-DIAP-60x60_.Premiums.png" width="60" height="60"></p><h3 class="black mb">Premiums</h3></div>

and it has to change into the following when the sceen is less than 1024px wide.

<div class="heading-and-icon"><p><img alt="" src="http://www.smaac.nl/wp-content/uploads/2013/11/Icons-Disciplines-DIAP-60x60_.Premiums.png" width="60" height="60"></p><h4 class="black mb">Premiums</h4></div>

This is the css:

.heading-and-icon [class^="icon-"], .heading-and-icon [class*=" icon-"] {		font-size: 55px;		margin-right: 10px;		vertical-align: -12px;		width: 35px;	}		.heading-and-icon img{		float:left;		margin-right:1px; 	}		.heading-and-icon h3 {		padding-top:15px;		display:inline-block;		*display:inline;		*zoom: 1;		padding-left:10px;	}@media only screen and (max-width: 1024px) {		.heading-and-icon [class^="icon-"], .heading-and-icon [class*=" icon-"] {		font-size: 55px;		margin-right: 10px;		vertical-align: -12px;		width: 35px;	}		.heading-and-icon img{		float:left;		margin-right:1px; 		width: 40px;		height: 40px;	}		.heading-and-icon h3 {		padding-top:5px;		display:inline-block;		*display:inline;		*zoom: 1;		padding-left:10px;	}}

Can u guys help me out here?

 

Thanks in advance,

 

Cheers

Edited February 7, 2014 by RuudBergen

[dsonesuk]

You would never change h3 to h4, or any H# to a different H#, its supposed to follow a specific order for seo purposes (H1 being the most important), not change because of different screen size.

 

You can change the font-size, etc for header elements, but not the element itself.

[RuudBergen]

How about only changing the font size of the <h3>?

[newseed]

You can use css media queries which is what you already have listed in your css code (see red) you've posted. Here's your code again with the added font size for the h3 tag listed in bold below.

 

@media only screen and (max-width: 1024px) { .heading-and-icon [class^=icon-], .heading-and-icon [class*= icon-] { font-size: 55px; margin-right: 10px; vertical-align: -12px; width: 35px; } .heading-and-icon img{ float:left; margin-right:1px; width: 40px; height: 40px; } .heading-and-icon h3 { padding-top:5px; display:inline-block; *display:inline; *zoom: 1; padding-left:10px;

font-size: 40px; }}

Edited February 7, 2014 by newseed

[Ingolme]

Understand that changing <h3> to <h4> means changing the meaning of it. If what you want to change is the font size, change the font-size property of the <h3> element. CSS is there to change the way the page looks.