Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 1, 2020 at 3:36 pm #1242539
    designbasis

    Hi Folks,

    follow-up question to h-headlines: every h-headline keeps its pt-size if
    you switch to another resolution. A while ago Mike helped me witn
    that problem, but told me at the same time that the snippet works not
    for every page. So, today I’ve got a new site, with new h-headlines. ;-)
    Mike – would you please so kind again? :-)

    For the new site I need a snippet for every single page where I use H1
    and H3. So it concerns the complete site.

    I’m looking forward to your answer…till then…

    Kind regards
    Carsten

    September 5, 2020 at 8:38 pm #1243647
    Mike

    Hey Carsten,
    Sorry for the late reply, it seems I missed the notification about this thread. To change the font-size across your whole site
    for H3 & H1 please try this css:

    #wrap_all #main h3,#wrap_all #main h3 > span {
	font-size: 28px !important;
}
#wrap_all #main h1,#wrap_all #main h1 > span {
	font-size: 30px !important;
}

    Please adjust the font sizes to suit and let us know if this misses any H3 or H1.
    An easy way to test is to add a color you don’t use like orange and then check your site for any H3 or H1 without the color, I took a quick look at a few of your pages and this seems to work correctly.

    #wrap_all #main h3,#wrap_all #main h3 > span {
	font-size: 28px !important;
        color: orange !important; 
}
#wrap_all #main h1,#wrap_all #main h1 > span {
	font-size: 30px !important;
        color: orange !important;
}

    After applying the css, please clear your browser cache and check.
    You can also change your default H tag sizes at Enfold Theme Options > Advanced Styling, which might be a better option for you in this case, since it is for the whole site. Please try both options.

    Best regards,
    Mike

    September 7, 2020 at 6:20 pm #1244042
    designbasis

    Hi Mike,

    thx for your answer! But unfortunately we have a little missunderstanding. ;-)
    Did you take a new view to the old thread again? I only want the size-
    correction on the mobile-view/resolution, not on the desktop-view! I changed
    the H-tag-sizes in the “Advanced Stylings” already and because of that, the
    Headlines doesn’t change to a smaller size in the mobile view! ;-/

    I need a snippet, or snippets, like these for my H1 and H3:
    ———————————————————
    @media only screen and (max-width: 767px) {
    #main .av-mini-font-size-14 > h2 {
    font-size: 12px !important;
    }
    }
    ———————————————————
    Now you know what I need…don’t you? :-)

    I’m looking forward to your new reply.

    Best regards
    Carsten

    September 9, 2020 at 12:31 pm #1244613
    Mike

    Hi,
    Thank you for the feedback, please try this css:

    @media only screen and (max-width: 767px) { 
	#wrap_all #main h3,#wrap_all #main h3 > span {
	font-size: 12px !important;
}
#wrap_all #main h1,#wrap_all #main h1 > span {
	font-size: 14px !important;
}
}

    Please adjust the font sizes to suit and clear your browser cache and check.

    Best regards,
    Mike

    September 9, 2020 at 8:46 pm #1244683
    designbasis

    Hi Mike,

    thx for you new reply! The snippets working fine! :)
    New questions are already in the pipeline…see you soon! :)
    But this thread you can close.

    Best regards
    Carsten

    September 10, 2020 at 4:24 am #1244721
    Jordan Shannon

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘H-Headlines / Fontsize-Adjusting for mobile view’ is closed to new replies.