Mobile site does not look like webflow preview

Design help General
1

I’m having some issues with the mobile version of my site. It looks fine in the designer preview and on published desktop site, even when scaled to mobile size. However I have a couple of issues that occur across the site.

I have side by side screenshots of the webflow preview and live site in a mobile browser.

  1. The text for the buttons an some of the headers don’t have their padding on the upper side in mobile browsers.

CA Website Issure Screensshot 1
CA Website Issure Screensshot 1812×809 586 KB

  1. It seems like the list items in turn white or transparent in mobile browsers.

CA Website Issure Screensshot 2
CA Website Issure Screensshot 2812×809 336 KB

Can anyone help me out?

Here is my site Read-Only:
https://preview.webflow.com/preview/champion-academy-website?utm_medium=preview_link&utm_source=designer&utm_content=champion-academy-website&preview=fd1b1c2b686a25e924071cfc28680a27&mode=preview

2

Since you are saying you are having an issue on the published site being different from the designer preview, sharing the published URL would be helpful. That way one could examine it in the browser dev tools.

It’s also helpful to share what browser version and OS release you have a problem with.

3

The published site is:

I’ve found that the problems are not just on mobile, but any Apple device. I tried in safari, chrome, and opera on my iPhone and a MacBook and have these issues. I don’t have these issues in any browsers on my PC.

4

I found the issue!
It was an issue with the font. I switched from a .ttf file to an .otf file and everything works as expected