I am new to webflow and very new to designing, as in this is my first attempt at designing my own page. It is very simple, which i like, but I’m running into a host of problems thus far. One of my main issues is that when I publish my page and look it up via my iphone, there is a lot of white space to the right of my project… is there a way to make it stick to one position and get rid of all of it?
Im not familiar with the jargon used in this field so please bare with me and give me some tips… below is the preview link… thanks
Im having enough trouble getting the elements to behave on ios
Ill have to fix Android another time
Im thinking, as long as the desktop and ios versions look ok, the droid users can go to the laptop version… Ill loose out on retention switching devices, but its driving me cookoo.
Sure thing. But just so you know. If you’re having issues on both IOS & Android, I would look at the individual styles settings on single elements. Whenever there are too many “BLUE” settings in your styles panel, that’s where your problem will originate. The least amount of individual styles you apply the easier it is for multiple platforms and devices to display. Try to refrain from styling inner/nested components. Focus styling properties on Wrappers & Outer Divs, not inner.
I’m almost 100% positive, that’s what is happening. If you’re using a lot of “Margins, Positioning Absolute w/margin and padding, inline-blocks w/individual margin/padding, etc”. This is where you get the inconsistency.
Just let content flow naturally with display: block when you want something moved. Use “Display Settings” from the top level parent divs. Then when display is set, you can nudge over a little with “Parent Div inner Padding”, while leaving inside content alone to flow.
Hmmm so I’ve taken a look and the majority of my elements are BLUE… öh no" If i change them what will that do to my project?
I was using the DUNZO template provided by webflow, and tried to make it work within those parameters.
Since I have your ear… do you know why elements change if I’m making changes to one device, lets say I make changes to the landscape mode on iphone 6 and switch back to portrait of desktop, the elements shift…
I know this is probably not a normal request and not good all around, but im desperate. If I gave you my log in information, would you be able to give a more accurate assessment to what I needed to change and I will make the changes?
There is nothing at all wrong with having “blue” settings in your styles panel. It just means that you’ve styled a lot of things, which is what the style panel is for.
The problem is relatively basic. The viewport is stretching to accommodate what it perceives as all of the area necessary to display all of your content.
Simple. Right? Not always.
One thing that you are doing “wrong” is you are using negative margins with high values (-565 on your “section” element) for positioning on mobile, which is almost always a no-no.
The one that is specifically causing a problem is I BELIEVE your “image 6” element, which is positioned something like -350pixels to the left. The viewport is widening to display the area where the image “should” be, which is making the page stretch.
Also, don’t ever give out your account login information. Ever. We can see everything we need to see with your read-only link. There is no need for anyone to login to your account for this.
That should give you a little better understanding about how this whole thing really works. Once you get a feel for how the visual code functions, you’ll likely find that you have been over-analyzing getting things into the right place. In an ideal world, you want to let the browser do a lot of the work for you. That doesn’t mean you won’t style things, but your styling will be much more subtle.
I’ve been using Webflow for over 2 years, and I’m going through it as a fun refresher, because there are features of Webflow that I just haven’t used, so I go on not using them.
Not sure if this is it, but I’m writing it for you in hopes that it does.
Sometimes a common problem arises with ‘too much white space’ to the right of your site on mobile. I’m not sure if this is what you’re experiencing, but sometimes it comes from pasting formatted text into a Rich Text box. There’s a type of Space called a “non-breaking space” and it forces text boxes to go wide. There can also be a problem with web or email addresses are too wide for a device and forces your site to expand, with strange white space results.
same issue you find her - “salad” of negative margins - relative moves of elements and widths. This is very buggy. Try to work with padding - margin - your layout is very broken like this (Elements overlap) + Nightmare to select elements
