Text size scaling on mobile vs section height vs viewport width

[alex_2000]

Dear Okler Team,

As you will see in the provided provate url the scaling of the text appearing on the main first section on the page (code snippet below) seems to look well all (normally) sized windows on a notebook/monitor typical resolutions.
Where the width equals or much bigger that the height dimension e.g. “1080×1920”.

Unfortunately on a mobile with typical resolution being the the reversed HD “1920×1080” the scaling of the section to 40vw seems to be working nicely (could be brought up even to 45vw-50vw if it helps to solve the problem), BUT the text appearing on that section is way too big and the line spacing too.

If you load the provided homepage on a devices with resolution similar to 2 resolutions above “1080×1920” and “1920×1080” you will see the problem (not well proportioned) on “1920x1080″.

Thank you in advance and looking forward for your feedback.

Best Regards,
Alex

<div role="main" class="main">
<section class="custom-section-style-1 section border-0 mt-0 mb-0 pb-0 py-0" style="background-image: url(img/femina/main/homepage-section-background.jpg); background-size: cover; background-position: center;">
<div class="container h-100">
<div class="row align-items-center justify-content-center h-100">
<div class="col-lg-12 pt-5">
<h2 class="text-center text-color-light-custom-1 text-4 text-sm-4-5 text-md-6 text-lg-7 text-xl-7 line-height-sm-2 alternative-font-2 mb-2 appear-animation" data-appear-animation="fadeInDown" data-appear-animation-duration="950">- Individuelle -</h2>
<h1 class="text-center text-color-light-custom-2 font-weight-bold text-5 text-sm-5 text-md-7 text-lg-8 text-xl-9 line-height-sm-2 line-height-2 mb-2 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="800" data-appear-animation-duration="950">Psychologische Beratung</h1>
<h2 class="text-center text-color-light-custom-1 text-4 text-sm-4-5 text-md-6 text-lg-7 text-xl-7 line-height-sm-2 alternative-font-2 mb-1 appear-animation" data-appear-animation="fadeInUp" data-appear-animation-delay="1700" data-appear-animation-duration="950">von Frau zu Frau</h2>
</div>
</div>
</div>
</section>

---

Template Version: 8.2

[Support]

Hello, I’m sorry but we got a little confused about that, could you please send a screenshot of the problem so we can understand it better?

Thanks.

---

[alex_2000]

Hello, sure. Here you go, that is part of a screenshot from a smartphone showing the scaling of the text issue.
That does not happen on Monitors/Notebooks of course.
If you will visit the URL I have provided on a smartphone you will see the same issue.

---

[Support]

Hi, OK, thanks for the screenshot, one thing you can try is to set viewport sized typography, example:

HTML:

<h1 class="text-center text-color-light-custom-2 font-weight-bold line-height-sm-2 line-height-2 mb-2 custom-font-size appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="800" data-appear-animation-duration="950">Psychologische Beratung</h1>

CSS:

.custom-font-size {
    font-size: 2.6vw !important;
}

Please try that and let me know if you need further assistance.

Kind Regards,

Jonas

---

[Author]

Posts