Text gets cut off when published

Nearly every instance of text on my website gets cut off, for some reason. Scrolling below the text seems to fix it, but until you scroll below it and back up again, it stays cut off, and for text at the bottom of a page, it stays cut off forever. This is only a problem on the mobile version of my website.
Also the text moves up about 5 points when published. It’s easy enough to just move the text down 5 points in Adobe XD from where you actually want it to be when published but it’s inconvenient nonetheless

hey @Cannon thanks for explaining all of that, looks like a weird behavior indeed, sorry about that! Would you mind sharing your XD artboard with the issues here (you can use a wetransfer link) or recreating a similar, simpler version of this issue so that we can investigate it further and hopefully find the resolution? Thanks! :muscle:t2:

sure! I just uploaded the Adobe XD file to wetransfer. Hopefully this is what you needed

Thanks for sending your file :+1:t2:!

Actually when I synced your design it looked really great! What web browser are you using? Can you try to resync it again and do a hard refresh, let me know if you still have this issue. If you could record the screen so I can fully understand what’s not working well, that would be very helpful! Thanks :pray:t3:

It looks fine in the preview and on the Desktop. The only problem is when it is published and viewed on mobile. I am using an iPhone to view the site. I have viewed it using the Chrome and Safari apps. I made an example in the video to show how the text gets offset vertically, but you can also see how it gets cut off.

Got it, thanks for that video I understand now what the issue is. Let me investigate this further with my dev team and hopefully find a solution for you :nerd_face:!

Hey @Cannon ! Did you manage to upload your custom font, Gotham? If you arrange the text relative to the button centered horizontally and vertically:
image
it should work and center properly in the Anima view as well. When I do this with other fonts, it works well, I just don’t have the Gotham text downloaded on my computer so I can upload that custom font. Let me know, thanks!

From some tests that I’ve done, it looks like the Gotham font is the problem with both the alignment issue and the text being cut off. I did upload the Gotham font to my website a while ago, but I have since changed the location of the font on my PC. Is there somewhere in Anima where I can go to re-upload the font file? I know that, in the video, a prompt popped up to upload the font, but that doesn’t pop up for my original project

Hey I’m not sure why you wouldn’t be prompted with ‘missing font’. What if you try deleting the project and resyncing it?