I am having a very annoying issue where I got my site 3dasp.com’s mobile layout perfect in the webflow ui, however almost nothing is working properly when i visit the site on my phone.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
thanks for the speedy reply!
@3dasp, Is it safe to assume you want all mobile screens to mimic the display screen, with the navigation heroes lined up like they are in the screen shot?
Love the wild design btw.
Edit: Some Columns, A relative parent, and some absolute positioned children are gonna be your best friend here.
Well, that would be ideal, but tbh I think that’s kinda a long shot, so I simplified things quite a bit, so I just want the mobile version to work the way it does on the preview, on my (and other visitors) phones. Currently though there are a bunch of issues with some images not showing up and the layout acts differently
@3dasp I think your design would really benefit from using position instead of spacing. I wish I could see an easier way with the current spacing values.
I did a rough rebuild of your nav using some grandparent and parent divs set to Relative. Inside are child divs set to Absolute. The absolute divs move relative to their parent (if the parent it set to relative). This allowed each navigation category to scale and move as a unit. And sadly, I can’t share it with you despite trying to copy and paste the basic structure. Lesson learned to build something on my own Webflow dashboard. Anyway, I’m sharing some screenshots to see if it’s the general idea of what you’re after. To turn the navigation when the view is Portrait Phone, I applied a 90° transform to your navigation categories.
Tablet Layout:
Landscape Phone Layout:
Portrait Phone Layout:
This was the vertical version of the Portrait Phone Layout (before applying a 90° rotational transform):
oh wow that looks great!.. can you check out my webpage on an actual mobile device tho? it seems like the biggest issue for me is that it wont actaully display the same thing that the webflow preview shows, (i.e. the preview doesnt actually work at all.) I dont think this fix would be a solutuion to that… do you?
@3dasp It SHOULD be a fix for that altho each display size breakpoint will require some messing with. That’s what’s worked for me anyway as I don’t like CSS grids. I suspect they’re super powerful but they’re finicky and easy to break. The portrait view of your site looks pretty good to me with maybe some adjustments to your top nav bar. So I think you’re meaning, in particular, the landscape view? It looks like the photos have a screen width (or %) applied to both height and width, so when the screen changes proportions, they’re doing the same. You could try only applying a percentage or vw to the width only to fix that. Remove all image height values or vice versa. As for the other elements, I’ll hop on my desktop later. In fact, if I can, I’ll try to recreate the basic structure I did yesterday in a format I can share.
Here’s a screen shot of my horizontal view:
And here’s the portrait view:
Stuff gets super janky if you go to the concept page… some images just don’t even show up!
Im actually planning to just block the landscape view with an overlay that says please use portrait mode, because I don’t feel it’s necessary, and this broken functionality has got me pretty frustrated.
@3dasp Yeah, phone landscape layout is a total bear!
It looks like the margin and padding of some images or text might be what’s causing stuff to break at smaller displays sizes.
I’d suggest removing the height values for your images and instead use the width values to dictate their size. Or use the height values only. The normal ratio of a placed image will be retained when using just one value (height or width).
When in the mobile breakpoint view, I adjusted some things on your columns. See the screenshots to see if this might help.
First, with the column selected, go to settings and see if changing Columns Options helps. Sometimes it does, sometimes it doesn’t depending on content.
This shows the values of the Columns for the Phone Portrait layout. The size of the inner category nav bars need to be reduced, but this seems to help. Of course I can’t publish it to really see if it helps.
Sometimes you can just get rid of certain width or height values and leave that area blank. Unless of course it really matters. Often just setting a width and a max height is all ya need. Even then, sometimes the only value needed is a width.
Bah, hope this kinda helps.
