Streaming live at 10am (PST)

Page elements rendering weirdly on mobile portrait…


#1

Can anyone tell me why all the elements are collapsing like this on mobile portrait? Looks fine in the Designer. Is it something to do with flexbox? See screen capture and public link below.


Here is my public share link: LINK


Flexbox Safari browser not working right
#2

Hey,

Can you please also give us you published link ?


#3

Sure, it's studio80.webflow.io.


#4

Hum it's weird, try to give a fix height to your section

and give Max auto on your parent element


#5

what tool is that you are using for the responsive views?


#6

I would also raise the same question as @dapitts08 above. Sometimes these tools like Smart Look which I since stopped using to render pages without proper CSS causing display glitches. I would say to use a real device or chrome dev tool if all else fails.


#7

Right but i noticed a bug on a real Smartphone, so there is definitely an issue :smiley:


#8

It's the Responsive Design Mode feature built in to the developer tools in Safari. I only used it for purposes of easier demonstration, but I also confirmed that the issue exists on mobile Safari in iOS.


#9

@Marxamus Have you tried my fix ?


#10

It didn't work, unfortunately…


#11

:frowning: arf, i'll take another look tomorow


#12

That would be great. Thanks for your help!


#13

No Problem. Did you publish my "fix" ? it's different now on my mobile.


I really looks like a flex issue now :slight_smile:
Maybe Try don't shrink


I wish i could publish when i try something since it doesn't change anything from my point of view :smiley:
Hard to fix something blindly, especially when we deal with Flex :kissing_closed_eyes:


#14

Ok i think i found it !

It seems to be a safari issue, i just opened your link in the designer but using Safari this time.
Here is how it looks on safari preview:

This time it's exactly the same issue i see on my mobile but in designer.
So i tried this and it worked !

Turn your Flexbox settings to Sizing Expand on your Block Yellow Block class

Then give a Bottom Margin like 40px on Block Content

Tell me if it's working for you :slight_smile:


#15

You're a gem, Louis! It worked perfectly. Thanks!


#16

@Marxamus With @vincent an others, we are talking about designing more on Safari to solve issues like this that you can't see on Chrome. I think it's a good idea to open your project in a Safari browser sometimes


Flexbox Safari browser not working right
#17

Yeah but we failed yesterday trying this for flex dyn lists...

@jdesign came to me abt a possible other way..; gonna explore and report.


#18

Yes but i was unsolvable :smiley:


#19