Disable Landscape Mode On Mobile in Wix Studio

1. Go to your Wix Studio Dashboard, head over to Settings, and Custom Code.

2. Click on + Add Custom Code and paste this code. Chose to load on all pages, and place it in "Body-end".

   
   

   Upload the image and sound file you want to show in landscape mode to your Wix Studio Website, when done, head over to your media library inside the editor, click the three dots on the image, and chose "Copy URL". Replace the highlighted code below with your links and you've officially disabled landscape mode on mobile for your Wix Studio Website!

Enjoy! <3

<style>

/* 👇 Styles for the landscape warning screen */

#landscape-warning {

display: none;

position: fixed;

top: 0;

left: 0;

width: 100vw;

height: 100vh;

background: #FFFFFF; /* Background color */

color: #E42121; /* Text color */

font-size: 24px;

font-family: sans-serif; /* Uses default system font */

text-align: center;

display: flex;

justify-content: center;

align-items: center;

z-index: 9999;

flex-direction: column;

padding: 20px;

}

#landscape-warning img {

width: 250px; /* Adjust size of the image */

height: auto;

margin-top: 15px;

}

</style>

<div id="landscape-warning">

<!-- 👇 Change the message text below -->

Oops! This site works best in portrait mode.

<!-- 👇 Change the image by replacing the URL -->

<img src="https://static.wixstatic.com/media/3d4741_7629103ff7564e95bfeb4c3534cfc032~mv2.webp"

alt="Warning Image">

</div>

<!-- 👇 Change the audio file by replacing the URL -->

<audio id="flip-sound" src="https://static.wixstatic.com/mp3/3d4741_4cbc66b8e6394ae185bb6b66f4d40083.mp3"></audio>

<script>

// 👇 Only run this behavior on mobile devices

function isMobileDevice() {

return /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);

}

function checkOrientation() {

const warning = document.getElementById("landscape-warning");

const flipSound = document.getElementById("flip-sound");

if (isMobileDevice() && window.innerWidth > window.innerHeight) {

warning.style.display = "flex";

flipSound.currentTime = 0; // Reset sound to start

flipSound.play();

} else {

warning.style.display = "none";

flipSound.pause(); // Stop sound

flipSound.currentTime = 0; // Reset sound

}

}

window.addEventListener("resize", checkOrientation);

window.addEventListener("orientationchange", checkOrientation);

checkOrientation(); // Initial check on page load

</script>