Site looks good on desktop but blowing up on my phone

Design help General
1

So, just like the title says… I am new to WebFlow and just used this system to start building my company site. I am used to Dreamweaver, so this is all very new.

I got my home page working properly. Looks good, seems to work right. But I sent the link to some friends and it’s just blowing up on the iPhone. The form is all wrong. The page is no longer padded or centered.

Help?

Here is my site Read-Only: https://preview.webflow.com/preview/droneguycda?utm_medium=preview_link&utm_source=dashboard&utm_content=droneguycda&preview=1941bfb597bc942dc6c94dcc99973139&mode=preview

2

I quickly dragged out the premade WF contact form and dragged it into the page and it works perfectly over all the different screen sizes. You can see the difference between the premade layout and your layout above in these screenshots.

forms
forms2283×1466 100 KB

I would suggest putting the form at the top level directly under the body tag.

form 2
form 22040×1564 80.3 KB

3

Your “Contact Form Grid” div is set to a width of 800px. Drop that down or switch to a % on tablet/mobile views.

4

My header graphic and horozontal rules are all 800 pixels as well, and they display properly. Why would this see the two things differently?!

Also look at how the page is mashed up against the left hand side of the page.

IMG_2050
IMG_20501242×3614 622 KB

5

Is there a way to style pages SEPARATELY from the main desktop site version? Because I sure think that is what is happening here. Those input forms are not the same as my design. I suspect there is a mobile version and a desktop version.

6

The answer is yes there is, and I may have figured it out.

7

For anyone else who might have an issue with this problem, the breakpoints are not just set up to preview device screen sizes. They can also be styled separately. I’m still having some frustrations but making forward progress. But the answer to basic question “can webflow format pages for mobile devices?” is yes. And the key is in breakpoints.