L/R Padding in Safari not working

[dave8794]

Hi, the left and right padding below isn’t working in Safari, but the bottom padding does. Other mobile browsers are fine. Not sure what I’m missing.

@media screen and (max-width: 800px) {
.problem3 {
font-size:1.4em;
line-height:1.4;
padding-bottom:10%;
padding-left:5%;
padding-right:5%;
}
}

[ronpat]

@dave8794

Not sure what I’m missing.

I don’t know what you are missing, either; but I know what we are missing… we are missing the bigger picture. We need to see all of the code that is influencing and being influenced by the above media query, including whatever .problem3 is. We also want to know which version of Safari you are using.

You can post a working page that demonstrates the issue or a like to the test site that demonstrates the issue.

[dave8794]

Here is an image of the problem. It is Safari Verision 9.1.

The padding is applied using Chrome on an Android device.

Each line of text has 5% padding L/R. So they should all have a similar max width.

Site

[Erik_J]

I guess it is the text wrapping that makes the line lengths differ?

Try to apply “text-align: justify” and see if that’s the reason.

A good test option is to apply a background color to the elements you’re investigating.

[dave8794]

Thanks for the idea, that didn’t change it. It just made the second line wrap differently.

[Erik_J]

Yes, it wouldn’t be centred. Did you try give it a background color?

Then I suggest you follow the advice @ronpat gave.

[ralphm]

This is what’s happening on my iPhone:

So the padding is being recognized. Was your screenshot from an actual mobile or an emulator?

[dave8794]

It was from an actual phone. I wonder what happened. Thank you for looking.

[ronpat]

The font sizes appear to be different. I assume that the default font-size is a user option. Have you compared the user settings in each phone?

…or has this issue been resolved?

[dave8794]

Hi ronpat, the font sizes are intentionally different. Everything seemed to be working fine from the screenshot ralphm kindly provided. I don’t have the ability to test on other devices. I think Im just going to have to cross my fingers it works! Thanks for the follow-up!