Font not working on mobile preview, nor text alignment

[levon]

Hi here is a preview of my site, it looks fine so far on chome (except for the '{' at the top of the page)

However, my font wont appear on mobile and the text isn't aligned and cantered on the middle of the iframe as shown on desktop.

Here is a preview link, which seems fine in Chrome https://j4theqdjs4v4xbsf-74866557205.shopifypreview.com 

[ThomKnepper]

Hi there,

Can you please tell which exact fonts you're talking about? It looks like you have a couple of liquid errors on your website including some liquid that is responsible for loading the CSS for your fonts. 

If you can provide a little more info I'll probably be able to help you a little more.

[levon]

Hmm those errors might be from the iframe, I did some extra coding with the help of this forum and chatgpt to widen the iframe to screen size.

The font I'm talking about is called Cinzel-SemiBold and appears in the middle of the iframe 'Internal Affairs' as seen on chrome 

[ThomKnepper]

For me it seems that the fonts are all loading properly actually.

[levon]

Here's a screenshot of it on my end

[ThomKnepper · Accepted solution]

Hi Levon,

I found the issue, you have set your height of your video wrapper with a padding %. After a quick look on your website I noticed that you're making quite a lot of fundamental mistakes. I would recommend you to check out this website and learn about the basics of the CSS box model.

https://web.dev/learn/css/box-model/

Setting a height of a element with the padding property is simply the worst thing you can do if you want to properly build your website.

I hope this helps.