Designer view different to published on iPhone

Design help General
1

Hi,

I have made what seems to be a responsive flexbox in the webflow designer (link below) in the About section of a website for a client.

If you go to mobile view and increase view-width you can see that it scales nicely. You can also see the the 2 light-blue lines underneath the Section heading text “A small decription of the section” are infact light-blue.

After I publish this page, the flexbox layout is not wrapping properly and the blue lines have some kind of grey in them aswell as light blue (see image below)

640×1136 170 KB

Some more info:
Live Page: http://naomiwilliamsvocals-f1b34c3cc4ba05084e5.webflow.io/
Browser used with Designer: Google Chrome - Version 50.0.2661.102 m
Device with discrepancy: iPhone 5 - Safari - iOS 9.3.2

Here is my public share link: https://preview.webflow.com/preview/naomiwilliamsvocals-f1b34c3cc4ba05084e5?preview=aca41a343eabf981619902d7c06560b7

2

I’ve fixed the styling, but that doesn’t explain why webflow showed something different to the live site…

The styling problem was:
Flexbox column 2 which I expected to wrap, wasn’t wrapping because it had minimum width set to 300px and the flex child “fill free space” setting applied. So it was filling about 50 pixels of free space with it’s minimum 300px, causing horizontal stretching.

Is it a big in webflow - showing difference in designer and live-site?

3

You should not have any fixed measurement width on mobile. :slightly_smiling_face:

4

So Designer view, being different to the published site on iPhone, sounds like a bug to me.

Specifically on a div, with a background-gradient of FullBlack-to-0% and FullWhite-to-0%. I can recreate this bug if anyone needs to see it.

5

Can you please share a screenshot of the behavior you are seeing? Thanks !! :sunglasses:

6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.