Unable to create consistent behavior across browsers and devices using flexboxes


I am making a portfolio site for an artist, and have been using Webflow in Chrome to build it. They want the site to be minimal, with an almost brutalist style, and so I made them up a skeleton to see if they approved with the overall design. The site looks great when viewed on the computer, but it looks completely different on our phones (an iPhone 6 and an iphone 5s). I am a new website designer (it’s a fun hobby sparked by discovering webflow) and so I cannot figure out what sort of setting I’ve put in to make one page look so different across devices.

Here is how the site looks on Chrome and Firefox:

And the same site on an iPhone 6:

When I am in webflow and use the preview fucntion, the mobile version does not look like this at all. And when I resize the page on a chrome or firefox browser, it behaves properly.

I’ve shared the public link, can y’all see some sort of discrepancy in my classes that could be causing this? I want each page to act the same, but I currently have the comics section without a container and the illustration section with a container to see if this made any difference. Ultimately, I would want the site to look as close as possible to the above computer screenshot as possible, regardless of whichever device they use.

Thank you!

Here is my public share link: LINK
(how to access public share link)

Hi @zachmandeville it looks like your elements are trying to conform to an auto height setting, but there isn’t a relative height setting available which is causing the issue.

Try setting either a pixel based height of a “vh” based height for the “collection-div” link element as shown below :slight_smile:

That fixed it beautifully. Thank you!

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