STRONG SUGGESTION:
Check both 1280 and 1600 screen resolutions
Laptops/Widescreen Monitors
While we all deal with making sure our layout designs also look proper with tablets and phones, many do not realize that “Scale” does not always have the same effect when their design layout is viewed on a 17" laptop or widescreen monitor, with the recommended screen resolution of 1600x900.
Helping Everyone:
Many elements like Groupings and stacks do not “Scale” from 1280x768 to 1600x900 and remain as you intended, particularly if they are inside a container or overlap an image, and perfect alignment is important. If you actually design using a 1600 breakpoint, there’s very little adjusting to do for mobile phones turned sideways. They do use the 16:9 resolution.
This nifty little script tells only mobile users to turn their phone sideways for best viewing. Paste this into Velo on your home page.
// Nice little code for mobile user viewing. Use the Velo ID of your home page
import wixWindowFrontend from 'wix-window-frontend';
$w("#homePage").onViewportEnter(() => {
if (wixWindowFrontend.formFactor === "Mobile") {
$w("#homePage").scrollTo()
.then(() => {
console.log("Please turn your phone sideways for the best viewing experience."); // Replace with whatever message you prefer
});
}
});
What have I already tried:
I have tried just about every workaround I can think of. The only thing I have found is finding a happy medium between the two screen resolutions.
Any Suggestions Welcomed
Any Suggested work arounds other have found work like a charm are greatly appreciated by all who have found this to be an issue.