Is "mobile first" design possible in Webflow? [YES]

Design help General
2

Hey @rico

If this is a feature that you’d like to see implemented in Webflow, the please vote for it. The popularity of features on the wishlists greatly helps the staff prioritize updates and features.
https://wishlist.webflow.com/ideas/WEBFLOW-I-105

In the mean time, here is a nice workflow.

  • Inside the body add 2 divs
  • Give the first div a class of mobile_container with the following properties max-width: 479px; margin-left: auto; margin-right: auto; background-color: white;
  • Give the second div a class of mobile_bkgd with the following properties: position: fixed; z-index: -1px; background-color: #A6A6A6

This will simulate the mobile portrait breakpoint.
To simulate mobile landscape breakpoint then adjust the mobile_container to have a max-width: 767px.
To simulate tablet breakpoint then adjust the mobile_container to have a max-width: 991px.
To simulate desktop breakpoint then adjust the mobile_container to have a max-width: auto.

As you build the site keep all of your elements inside of the container. When you’re ready to publish the final site simply move all elements out of the container and directly under the body and delete the container and background elements.

BEFORE

21
213840×2120 574 KB

AFTER - Mobile Portrait

18
183840×2118 411 KB

AFTER - Mobile Landscape

35
353840×2118 548 KB

AFTER - Tablet

19
193840×2114 447 KB

AFTER - Desktop

36
363840×2118 631 KB

Hope that helps. Happy designing!

4 Likes