Trouble with site design layout rendering on mobile

Hello, I am loving webflow and just launched my first site with it. I have exported the code and am hosting it from my hosting provider (bluehost).

I have an issue with the way my site text displays on mobile though. The text in the editor is black, the text displayed on desktop is black, but when it renders on mobile it is pinkish and blends in with the white background.

Can someone help me troubleshoot this? I am not sure why it would be the case. I am using custom fonts which are included in the fonts foler in the webroot.

Hi there @rosslikeswebflow, at least one issue is that there is some custom code error showing that there is some content being served from an https url, to your local url which is running http, so it is being blocked and raises the error. That should be looked at and corrected, or remove the elements causing the error:

The next thing is that there seems to be some overflow on mobile views, where some element style is applied to make some element go beyond the body viewport width. Overflow can be seen when the page will scroll horizontally in the designer:

https://cl.ly/2a1f3P1k1U1Z/Screen%20Recording%202017-09-30%20at%2008.20%20AM.mov

Overflow on mobile on the published site, especially iOS, will render as white space and “squish” the layout and generally cause problems, so I would check your styling, and make sure that all elements on the page are styled to be 100% within the body viewport on each breakpoint.

Take a peek at this helpful lesson from the university: Webflow 101 | Webflow University

I think if you fix those two things first, you will be a long way to solving the problem. I am happy to take a look again after changes are made.

Thanks in advance.

1 Like