'Text alignment doesnt work on mobile [CSS]

I have a weird problem with text alignment which I never had before.

On this app: https://damdafayton-countries.herokuapp.com/ two sections of text doesn't get aligned to middle in the mobile browser.

Here is desktop view.

And here is the view from android virtual device. I got the same view on mobile phone.

To amend the UI I did adjust the line-height for the above text and did vertical-align:sub. This fixed the view on mobile but as you can see its not in the middle in desktop browser.

But the text below doesn't respond to neither line-height nor vertical-align.

I have never experienced such trouble with text alignment before and I almost did zero progress. Probably I am missing something vital.

First text

<div className="text-center">
<NavLink to="/" className="text-white hover-1">HOME</NavLink>
</div>

Second text

<div className="bg-info py-2">
  <h2 className="fs-6 px-2 mb-0 flex-grow-1">
    {title}
  </h2>
</div>

Edit: I have reversed the amendments; currently desktop view it how its supposed to be and on mobile both texts are not aligned.

htmlcssbootstrap-4


Solution 1:[1]

not sure I understood your problem but if your are talking about the titles that are not vertical align it's because of your font "Gill,sans-serif" Sometimes some fonts change the vertical orgin point

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kinjii

Related Questions