Mon. - Fri. 9 am - 5 pm Support Policy
Remember me

Mobile Styling Variations

2 months 1 week ago #1

  • Paul Gomirato's Avatar
  • Paul Gomirato
  • Posts: 402
Hi

I have attached two screenshots of the same page. You can can the line spacing of the Blue Heading (H1) is different between the two phones.

The tighter one is from an iPhone 5 - not sure about the other as it was sent it to me. The current H1 styling under Phone Portrait is 40px / 42px. So the iPhone is displaying the spacing properly.

Any idea why the other phone is assigning a different line spacing?

I have attached 3 different examples where the spacing is not the same - in each case, the iPhone is reflecting the actual CSS.

Note that the mobile menu does not display the white text on the non-iPhone also.

Thanks
Attachments:

2 months 1 week ago #2

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 5463
Hello,

This is due to the width of the device screen.
You have configured for a device greater than 320px
have line-height: 52px; (starting from the desktop and up to 320px)
less 320px have line-height: 38px;

Regards,
Vyacheslav, Balbooa.com

2 months 1 week ago #3

  • Paul Gomirato's Avatar
  • Paul Gomirato
  • Posts: 402
Thank you.

I just found our client is using Samsung Note. Can you recommend where I should be making the adjustment to have proper line spacing for current mobile device widths? If not 320, what do you suggest to capture most devices properly?

2 months 1 week ago #4

  • Paul Gomirato's Avatar
  • Paul Gomirato
  • Posts: 402
I think I figured it out.
Thx

2 months 1 week ago #5

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 5463
You are welcome.
Powered by Kunena Forum