I’ve been working in WF for some time and all along, either I’m just not getting it, or not understanding why things show up one way when building out the site, yet show up differently on phones and tablets.
I’m looking at our “About” page on WF and it looks fine. Looking on my iPhone 5 it’s all off, things out of place. Same is true for all pages within the “Customer Info” drop down links (as they use the same symbol).
Similar things are occurring all over the website. I’m really not happy. They were fine until the other day when I moved one item in the Nav Section symbol. Now it’s all messed up.
I’m looking at your site and I would recommend to review a lot of the parameters you’re using to position your elements like padding, margin, positioning and some other stuff.
You have a lot of things on top of each other so thats way you’re getting all those weird behaviours.
Sorry if I’m not being more helpful but I would recommend to go through the tutorials and get more understanding about positioning of elements.
Hey @sethregan! Since different mobile devices have all sorts widths, when you’re testing your site inside the Webflow Designer, you’ll want to test responsiveness and fluidity. In each view, grab the side of your site and see how the elements reflow and respond.
The two primary culprits in your current design are (1) fixed width objects that end up “pushing” other objects to new lines when space gets too tight and (2) relatively small line heights in text objects, such as new years sale text 3 which cause your text to overlap in many instances.
If you test responsiveness and fluidity while you’re designing in the browser, you’ll be able to catch this type of stuff before publishing and testing on mobile devices directly.
Edit: OH YEAH and here’s the coolest feature in the history of the world. …as you’re dragging and resizing the width in the Designer? Common devices are listed down below at each pixel width.
