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