Hi there,
First time poster here. I’ve started a little project that was originally based off the side menu template. I seem to have a problem where the main title for each view is misaligned on the y-axis on certain android devices.
The first screenshot was taken on a OnePlus One, android 5.1.1 at 1080x1920. You can see the titles in both the header and in the sub header are misaligned. You can see the word “Calendar” is not in line with the menu icon.
The next screenshot was taken on a Samsung Galaxy Tab 2 (model SM T210) android 4.2.2, at 600 x 1024. It seems to be fine here.
I haven’t provided a screenshot but the title is centred and aligned correctly in my browser. I haven’t been able to test on any other mobile devices.
Has anyone encountered this problem before? Anyone have a suggestion for a fix that doesn’t break the alignment on other devices?
Thanks,
Dara
Hi Dara,
The titles are appearing in the primary location for android devices. For iOS devices the titles aligned centre whereas on android they are aligned left. I bet for your browser testing you are using a mac which is causing it to default to the iOS version which is why you are only noticing it now. If your using chrome you can select the type of device to emulate using the chrome dev tools.
You can find the documentation for it here and an example here.
Hi James,
Apologies, I must not have come across clearly.
I am aware that the horizontal alignment changes depending on iOS and Android. (Left on android, centred on iOS). This is not the problem.
The problem I am having is the vertical alignment on android. If you look at the first screenshot you can see the title “Calendar” is not vertically centred correctly. It’s out of line with the menu icon.
I’m using Firefox on Ubuntu for browser testing btw.
