The Brand New Blog Post Editor Released!

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

Mobile Styling Variations

1 week 1 day ago #1

  • Paul Gomirato's Avatar
  • Paul Gomirato
  • Posts: 388
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:

1 week 1 day ago #2

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 4858
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

1 week 1 day ago #3

  • Paul Gomirato's Avatar
  • Paul Gomirato
  • Posts: 388
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?

1 week 1 day ago #4

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

5 days 12 hours ago #5

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