Streaming live at 10am (PST)

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


#1

Hey there,

I guess this was asked once in a while before in some cases, but I want to hear some current
oppinions on this topic and maybe some suggestions how to work “mobile first” in Webflow
while its workflow is cascading down from big screen sizes to smaller screen sizes.

If theres an already excisting way/method to do this, the let me know too please :stuck_out_tongue:

thx !


#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

AFTER - Mobile Portrait

AFTER - Mobile Landscape

AFTER - Tablet

AFTER - Desktop

Hope that helps. Happy designing!