Streaming live at 10am (PST)

Trouble with responsive design of website in iPhones


#1

Hi guys. I need help with the design of my website. On iPhone it gets totally messed up, with one thing on top of each other. I dont know whats wrong with it, because on the preview and Android smartphones everything right.
Here`s the preview link:
https://preview.webflow.com/preview/danielazieglerdesign?preview=8ad8918eef3b425d230596265cf4fe66





#2

Hi there,

Thanks for posting. The Designer will automatically cascade styles down from the desktop break point → mobile portrait breakpoint. That said, any styles given to elements (e.g. margin and width) will be inherited by the same elements in smaller breakpoints.

That said, you used a lot of negative margin and defined widths on images to build your design on desktop. While this makes desktop look just right, it also makes it difficult to build a responsive mobile layout with the same elements. Here is a quick video to show some ways you can fix these issues: https://cl.ly/141z0i3S333J

You can check out this blog post to learn more on spacing elements. Nelson has a great stream on responsive design as well.

Hope this helps!


#3

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