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 2divs
- Give the first
div
a class ofmobile_container
with the following propertiesmax-width: 479px; margin-left: auto; margin-right: auto; background-color: white;
- Give the second
div
a class ofmobile_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!