Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 17, 2013 at 5:56 pm #189821
    mhiller

    I have a problem with H1 Headings sizing to a smaller font size and aligning properly in responsive mode. My website is here: http://www.nexuscontentlab.com.

    I added the CSS below from this post (https://kriesi.at/support/topic/responsive-headings) to my CSS:

    @media only screen and (max-width: 480px) {
 .responsive .container { width: 300px; }}
@media only screen and (max-width: 480px) {
 .av-special-heading h1 { font-size: 24px !important; }}
@media only screen and (max-width: 480px) { 
.entry-content-wrapper .post-title { font-size: 24px !important; }}

    I also included this code in my CSS so that the H1 Headers are not “all caps.”

    text-transform: none !important;

    With the CSS above, the fonts do not re-size and the header does not realign (the top words the header are not visible). When I remove the “text-transform” value, the H1 Headers go to all caps and align properly in responsive, but the font size does not change in the smaller screen size.

    Please recommend CSS that removes H1 “all caps”, but also re-sizes fonts and aligns H1 header in responsive mode. Thanks! Mike.

    November 18, 2013 at 3:40 am #189927
    Yigit

    Hi mhiller!

    Please try adding following code to Quick CSS as well 

    @media only screen and (max-width: 480px) { .template-page .entry-content-wrapper h1 { font-size: 24px; }}

    Best regards,
    Yigit

    November 18, 2013 at 4:16 am #189942
    mhiller

    Thanks Yirgit.

    Your code solved the font sizing issue, but I am still losing words directly below the header in responsive mode. I think there is some conflict with this line of code. . .

    text-transform: none !important;

    . . . that makes H1 all caps (which I don’t want), but keeps the H! completely below the header. Is there another way to eliminate the all caps, but still have H1 display completely in responsive? Mike.

    November 18, 2013 at 4:36 am #189954
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 480px) { 
.fixed_header #main { padding-top: 80px!important;}
.logo a { max-height: 75px; }}

    Padding top is currently set to zero, that is why content moves behind header. That code should fix it

    Regards,
    Yigit

    November 18, 2013 at 5:46 am #189972
    mhiller

    Thanks Yirgit,

    I inserted the code, bit it is still the same ::-(. Tried with a padding value of 180px. and it was the same. Sorry it is not an easy fix. Any other ideas?? Mike.

    November 18, 2013 at 1:41 pm #190046
    Yigit

    Hi!

    It does work on my end, please flush browser cache and refresh your page a few times. Please add following code as well, it will fix the same issue on tablets

    @media only screen and (min-width: 481px) and (max-width: 767px) {
.fixed_header #main { padding-top: 80px!important; }}

    Best regards,
    Yigit

    November 18, 2013 at 5:13 pm #190162
    mhiller

    I had flushed the cache, but turned off CloudFlare (and reloaded the page a couple items per your suggestion!) and it works great–thanks again for all your help. I will be buying a couple more licenses this week for other projects. Mike.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘H1 Headings Not Resizing in Responsive Mode’ is closed to new replies.