Is it possible to create a full screen popup that prompts users to turn their iPad to horizontal orientation before accessing the website in Webflow?

Published on
September 22, 2023

Yes, it is possible to create a full-screen popup that prompts users to turn their iPad to horizontal orientation before accessing the website in Webflow. Here's how you can achieve this:

  1. Create a new section: Start by adding a new section to your Webflow project where you want the popup to appear. Set the height and width of this section to 100vh and 100vw respectively, to make it cover the entire screen.

  2. Design the popup: Within the new section, design the popup using Webflow's built-in elements and styles. You can add text, images, buttons, or any other elements you want to display in the popup. Customize the look and feel of the popup using Webflow's design tools.

  3. Set the initial state: By default, you want the popup to be hidden when the page loads. In the Style panel, set the initial state of the popup section to 'Display: None'. This will hide the popup initially.

  4. Add interactions: To show the popup when the user accesses the website on an iPad, you'll need to add interactions. Create a new trigger interaction by selecting the section, and then go to the Interactions panel. Choose a trigger event, such as 'Page Load', to make the popup appear when the page loads.

  5. Condition for iPad orientation: To trigger the popup specifically for iPad users in horizontal orientation, you can use some custom code. In the interactions panel, click on the plus (+) icon in the 'Affect' dropdown and select 'Set Body'. Then click on 'Limit To' and choose 'Only When' and 'Custom Code'. Enter the following JavaScript code:

if (window.innerWidth < window.innerHeight && navigator.userAgent.match(/iPad/i)) {   return true;}
  1. Show the popup: With the condition set, you can now add an action to show the popup when the condition is met. Select the popup section, go to the Interactions panel, click the plus (+) icon in the 'Affect' dropdown, and choose 'Show'.

  2. Publish your site: Once you've designed and set up the popup, don't forget to publish your website for the changes to take effect.

Now, when iPad users access your website in a vertical orientation, the popup will appear, prompting them to turn their device horizontally for a better experience. Remember that users can dismiss the popup if they wish to proceed without changing their device orientation.

Additional Questions:

  1. How can I create custom interactions in Webflow?
  2. Can I use custom code in Webflow to enhance my website functionalities?
  3. Is it possible to create a mobile-only popup in Webflow?