Find Out Why Font Automatically Resized When Using Hestia' Grid System

[hollowaykeanho]

Description

Please provide a short description of what you have encountered below.

For some reasons, the current core_hestiaUI always self-adjusting its base font-size when being wrapped inside a <div> container. This is especially true using its grid system (e.g. <div class='column'>). See screenshot:

Expected Behavior

Please specify the expected behavior of your usage below.

The font remains the same even when being used incore_hestiaUI grid system.

Current Behavior

Please specify the current behavior of software below.

The font gets smaller being used incore_hestiaUI grid system.

Steps to Reproduce (COMPULSORY)

Please specify all the steps required to re-produce the problem.

(1) Warp a <p> inside a grid system in the __content.html. E.g.

<main>
    <div class='row'>
        <div class='column'>
            <p>Read Me Here!</p>
        </div>
    </div>

    <p>Read Me Here!</p>
</main>

(2) Import core_hestiaUI in the __components.toml file.

(3) Switch to browser debug mode. Observe using iPhone SE device.

Attachments

Please drag and drop the necessary data files (e.g. screenshot, logs, etc)
below.

[hollowaykeanho]

Issue was caused by the missing viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1" />.

Adding it into HTML template solves the problem but break existing UI components library (as they were designed without it) in Issue #24. Hence, we need review each of them in that issue ticket. Marked as solved.

[hollowaykeanho]

Released in https://github.com/ZORALab/Hestia/releases/tag/v1.0.0