RuudBergen Posted February 7, 2014 Share Posted February 7, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted February 7, 2014 Share Posted February 7, 2014 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. Link to comment Share on other sites More sharing options...
RuudBergen Posted February 7, 2014 Author Share Posted February 7, 2014 How about only changing the font size of the <h3>? Link to comment Share on other sites More sharing options...
newseed Posted February 7, 2014 Share Posted February 7, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted February 7, 2014 Share Posted February 7, 2014 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now