Streaming live at 10am (PST)

Mobile issues - grid behaving strangely on the actual mobile site but not in webflow preview

Hi all,

When I am pulling up my website on mobile, I have a grid that is acting strangely and creating some layout issues. The icons and corresponding words below should all be behaving the same way, but they are being warped for some reason.

As you see, the bottom right doesn’t look like the rest of the grid, even though they are using the same div, padding, etc… However, it looks fine on the webflow preview, and it looks fine when is use the inspect elements on chrome and view as mobile.

Please don’t mind the rest of the stuff (ie the buttons), this is still a work in progress.

I would love any help in getting this to behave properly! On the actual mobile site, I just can’t understand why it is looking this way!


Here is my site Read-Only: https://preview.webflow.com/preview/ae-website-project?utm_medium=preview_link&utm_source=designer&utm_content=ae-website-project&preview=c1c27c7a23f3516cc075a644458f97e6&pageId=5ed1a359b333df3b01aa6a06&mode=preview

I don’t know if anyone will ever see this, but I was able to resolve my own issue later by changing my icons and divs to set pixels instead of percentages. Hopefully, this might help someone who has similar layout issues.