Forums

Text not centering on android chrome

Permalink
Hi all,

On the homepage of the site I'm working on, mitek-automation.com, there are a couple lines of centered text overlaying a background video. It looks nice on a PC and on my phone's native and firefox browsers but my phone's chrome browser the text is off center a bit to the right,

I am using the Framework theme from the marketplace and the text is contained in an HTML block residing in a 1-col bootstrap container and has the following styling applied:

font-family: Georgia;
font-size: 50px;
text-shadow: 4px 4px 6px #000000;

Any ideas of why this is happening or how it may be corrected?

Thanks
Rick
 
Gondwana replied on at Permalink Best Answer Reply
Gondwana
Perhaps the enforced large font size is causing the text to overflow the column, resulting in the apparent asymmetry you're seeing. It would be normal to have padding on either side of the column, but that on the right is being pushed off the screen.

Enforcing large font sizes is risky in responsive layouts.
RickJ replied on at Permalink Reply
Thanks for the tip. What is the best way of specifying font sizes for titles, banners, etc. Perhaps I should be using % or em instead?
RickJ replied on at Permalink Reply
I finally got around to trying out your suggestions. I specified font size as % instead of px and it all works great. Thank you for the tip.