-
Posts
-
Good evening Folks,
new question: I noticed that the H-headlines unfortunately do not adjust in size
– say – in the desktop resolution a headline has e.g. 18pt and in the mobile
view it still has 18pt, although it should actually have 14pt. Is this technically
intended, or is it a bug? I actually can’t imagine that this is intended, because
that would contradict the “Responsive Logic”, wouldn’t it?Please take a look at the screenshot or go to the site…you have to scroll down
to the word: AUSSTELLUNGSBETEILIGUNGENBest regards
CarstenHi Rikard,
sorry, but the site is definitely accessible! Please try again. Only thing:
this adress is not in https-mode but http-mode. ;-)Best regards
CarstenPS: In the meantime I checked also other customer-sites and there is
the problem too! Please take a further look at the new screenshot.Hi,
Sorry for the late reply, so the text block element is set to reduce the font from 18px to 14px for small mobile which would apply to paragraphs, but the h2 tags in the text block override the font size.
This css will correct this site-wide, please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:@media only screen and (max-width: 767px) { #main .av-mini-font-size-14 > h2 { font-size: 12px !important; } }You will note that I changed the font size to 12px because your long word fits better on small mobile this way, but feel free to adjust to suit.
After applying the css, Please clear your browser cache and check.Best regards,
MikeHi Mike,
also sorry for my late reply and thx for yours!
Your snippet works very fine…thx again very much!
Is it possible to use the snippet for all other “h” tags,
too – means – can I change it to h1, h3 and so on
and it works too? Or is the fontsize of 14pt only for h2
and the other h-tags have other sizes? And what would
those be?Thanks in advance…
Kind regards
CarstenHi,
Yes if you adjust the h2 to any other one it should work just the same, provided that’s actually what you’re using in the section.
Best regards,
Jordan ShannonHi Jordan,
thx for your superfast reply!
Ok, I see…within the section it is no problem. But how can I use the snippet
in another section/ in another site? Because I’ve got some more customer-
sites with the same problem. ;-/ How can I adjust the snippet for other sites?
In the private content you can see another customer-example.And basically: How do I know/see which section I am actually in?
You guys mention these sections again and again, but so far I can’t
really classify how I recognize a section? Sorry, but after all this time
I’m still a beginner. I learn every day more but mostly it’s not enough. ;)Kind regards
CarstenHi,
Sorry for the late reply, the css I posted above will work on any site viewed as mobile with an H2 that also has the classav-mini-font-size-14:@media only screen and (max-width: 767px) { #main .av-mini-font-size-14 > h2 { font-size: 12px !important; } }I don’t imagine that you would like the other “H” tags to have the same font size on mobile as the H2, so if you can tell us what mobile sizes you want with each “H” tag we can assist.
I also recommend linking to a test page with different H tags you would like to customize because they may not all use the classav-mini-font-size-14for mobile so we should check, I also recommend choosing a custom class to add the H tags that you would like to customize, because changing the font size broadly and across your whole site can have surprising results because each element has different font sizes for the H tags depending on how they are used.
Using custom classes for customized styles gives you better control than broadly making changes that may cause conflicts later.Best regards,
MikeHi Mike,
thx for your answer and sorry for my late reply! But as you guys I’ve got also
so many to do right now. ;-/Ok, I see…thx for the detailed explanation! I’ll definitely come back to you Mike,
if I have a new H-question – on another page. :-)Kind regards
Carsten
- You must be logged in to reply to this topic.