Is it possible to lock the mobile orientation on Webflow to portrait only?

Published on
September 22, 2023

Yes, it is possible to lock the mobile orientation to portrait only in Webflow. By default, Webflow does not have a built-in feature for locking the mobile orientation, but you can achieve this by adding custom code to your project. Here's how you can do it:

  1. Open your Webflow project and go to the Designer.
  2. Click on the "Custom Code" tab in the Project Settings panel on the right-hand side.
  3. In the "Head Code" section, add the following code:
<style>  @media screen and (max-width: 768px) {    body {      -webkit-transform-origin: left top;      -moz-transform-origin: left top;      -ms-transform-origin: left top;      -o-transform-origin: left top;      transform-origin: left top;      -webkit-transform: rotate(-90deg);      -moz-transform: rotate(-90deg);      -ms-transform: rotate(-90deg);      -o-transform: rotate(-90deg);      transform: rotate(-90deg);      -webkit-transition: initial;      -moz-transition: initial;      -ms-transition: initial;      -o-transition: initial;      transition: initial;      height: 100%;      width: 100vh;      overflow-x: hidden;      position: fixed;      top: 0;      left: 0;      right: 0;      bottom: 0;      margin: 0;    }    html {      -webkit-overflow-scrolling: touch;      overflow-y: scroll;      overflow-x: hidden;    }  }</style>
  1. Click on the "Save" button to save the changes.

Note: This code will rotate the entire page by 90 degrees, effectively locking the mobile orientation to portrait only. Users will need to rotate their devices to view the content in landscape mode. Additionally, this code only applies to screens with a maximum width of 768 pixels, which corresponds to most mobile devices. You can adjust the max-width value if needed.

By following these steps, you can create a Webflow project that locks the mobile orientation to portrait only, providing a better user experience for your visitors.

Additional Questions:

  1. How do I add custom code to my Webflow project?
  2. Can I lock the mobile orientation to landscape only in Webflow?
  3. Are there any other ways to customize the mobile experience in Webflow?