#responsive#resolution
I’ve seen this question floating around often and have had to find solutions for it myself, so here’s a quick guide for three ways to make your site work well with different resolutions.
Presuming you are using the Wix Mobile feature for your mobile visitors, you can use these solutions for anyone viewing the desktop site.
The following is tailored for dynamic pages, since it should be much easier to reverse engineer the code for static pages.
import wixData from 'wix-data';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
$w.onReady(()=>{
$w("dynamicDataset").onReady(()=>{
//first we need to get the fingerprint of the browser's current width
wixWindow.getBoundingRect()
.then( (windowSizeInfo) => {
let windowWidth = windowSizeInfo.window.width;
//if you need to change sizes for many things at once such as large images and wide repeaters, use this to redirect people to a copied narrow version of the same page that you can design manually
let thisData = $w("dynamicDataset").getCurrentItem();
let wideUrl = thisData['link-wide-dynamic'];
let narrowUrl = thisData['link-narrow-dynamic'];
//if window width is greater than or equal to 1280 pixels on desktop site, direct here
if ((windowWidth >= 1280) && (wixWindow.formFactor === "Desktop")) {
wixLocation.to(wideUrl);
}
//or if window width is less than 1280 pixels on desktop site, direct here
else if ((windowWidth < 1280) && (wixWindow.formFactor === "Desktop")) {
wixLocation.to (narrowUrl);
}
} );
} );
} );
//or else if you need only minor tweaks you can choose to 1.show/expand and hide/collapse elements based on the windowWidth property and/or 2.alter the .html properties of text like so
let textValue = $w("dynamicDataset").getCurrentItem().mytext;
if ((windowWidth >= 1280) && (wixWindow.formFactor === "Desktop")) {
$w('#textElement').html = `<span style ="font-size:20px">${textValue}</span>`;
$w('#largeElement').expand();
}
else if ((windowWidth < 1280) && (wixWindow.formFactor === "Desktop")) {
$w('#textElement').html = `<span style ="font-size:14px">${textValue}</span>`;
$w('#largeElement").collapse();
}
//optimally you can modify solution 1 to link pages through code like this
//we'll use a repeater on a static page with links to dynamic pages as an example
$w('#repeaterDataset').onReady(() => {
$w('#repeater').onItemReady( ($item, itemData, index) => {
$item('#repeaterText').text = itemData.mytext;
$item('#repeaterText').onClick(() => {
//if the desktop window is greater than or equal to 1280 pixels wide or if you are on the mobile site, direct to the standard wide page (you don't need two different layouts on Mobile)
if ((windowWidth >= 1280) && (wixWindow.formFactor === "Desktop") || (wixWindow.formFactor === "Mobile")) {
wixLocation.to(itemData["link-wide-dynamic"]);
}
//if the desktop window is less than 1280 pixels wide and is not on Mobile, direct to the narrow layout page (the not equal to !== is just to show you can use different condition indicators if you need to)
else if ((windowWidth < 1280) && (wixWindow.formFactor !== "Mobile")) {
wixLocation.to(itemData["link-narrow-dynamic"]);
}
});
});
});
Hopefully this is easy enough to understand. The first code snippet requires two separate pages and is more flexible, the second only requires the one you already have but limits your options. The third option is the most ideal of the three, but requires you to link your elements using WixCode instead of the GUI.
Because the first option is a redirect, it will load two different pages every time you travel to the narrow resolution page. The good news is with WixTurbo, this shouldn’t take long.
I would recommend testing on Firefox and some Webkit-based browser like Chrome because their default resolutions are often different. This should help you test what elements to change and how.
Finally, in cases where you’re working on a simple page with a couple strips or so and you only need some text to be responsive, check out this post by Johanna!
I’m very new to Wix and have limited coding experience so I appreciate any help you may be able to offer.
I’m trying to implement the first example that you’ve given on a static page. I have tried modifying your code in many ways and can’t seem to get it to work properly. I keep getting redirected to /test/home1920 (my home page) no matter what I do. I’ve tried placing this code in the site tab, as well as the individual page tabs and nothing seems to help…
import wixData from 'wix-data';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
$w.onReady(function () {
wixWindow.getBoundingRect()
.then( (windowSizeInfo) => {
let windowWidth = windowSizeInfo.window.width;
//if you need to change sizes for many things at once such as large images and wide repeaters, use this to redirect people to a copied narrow version of the same page that you can design manually
//if window width is greater than or equal to 1280 pixels on desktop site, direct here
if (windowWidth >= 1280 & wixWindow.formFactor === "Desktop") {
wixLocation.to("/test/home1920");
}
//or if window width is less than 1280 pixels on desktop site, direct here
else if (windowWidth < 1280 & wixWindow.formFactor === "Desktop") {
wixLocation.to("/test/home1280");
}
});
});
export function anchorWelcome_viewportLeave(event) {
//Add your code for this event here:
$w('#anchorFeature1').scrollTo()
}
export function anchorFeature1bot_viewportLeave(event) {
//Add your code for this event here:
$w('#anchorWelcome').scrollTo()
}
You can use this code on either site or page tab depending on your needs. Are you getting any sort of error? Maybe try replacing this, as it’s better syntax…I’ll update the post as well:
Unfortunately that tweak doesn’t seem to help either. It just sends me to my home page no matter what. Doesn’t seem to be properly be taking into account the width of the browser window.
I don’t have any experience with Corvid, but am fairly avid with C++ and general coding. However, if I attempt to paste your code into the ‘site’ tab of Corvid (to apply to my whole site, not just a page… maybe that’s where I went wrong? Is this code meant for a single page?) I get an error that “dynamicDataset” is not valid. Any ideas? I would really love to get this working. I hate that Wix limits you to ridiculous 980px gridlines… sites look so much more lovely when they can fill the page. And, it really should not be that hard for them to make pages responsive to resize to various screens.
Anyway, I appreciate the help and I hope to hear from your soon. Cheers mate.
@skmedia Thank you. I just sent you an email with the link you mentioned in that thread. If you did not get the email, let me know and I will send it again. The email link was acting a bit odd so just wanted to make sure it got sent correctly. Cheers.
@skmedia Got it working, thanks again for your help… one issue I ran into was the size check would start looping, so I added a condition to it to only switch pages if it wasn’t on the right one.
Hello,
I am quite new to wix and corvid, and I need some help.
As an opening page I configured a strip which has a picture as background. Then i streched the strip. But
now I tried to match the strips heigth to the height (resolution) of every possible monitor out there, but i failed.
Is this even possible in corvid/wix? Because I didn’t find any “strip-height” or image “height” setting, where i can simply put in the height-variable and the job is done.
I tried around a little with your code @skmedia but I couldn’t figure out a way to solve my problem.
CSS variables like that cannot be set to DOM elements in Wix. You have access to stuff like that in iframes, but if this is a design priority for you I’d recommend WP. It’s like the difference between Photoshop vs Illustrator, they’re designed with different strengths in mind.
@skmedia OK thank you for your advice. It would have been a nice feature for the website that I am building. And as I wrote only for the image that appears first when you enter the site.
Hi @skmedia your workaround worked great. Thanks for that!
But there is a part where I got stuck, if you can help me out. I’d really appreciate it.
export function anchorWelcome_viewportLeave(event) {
//Add your code for this event here:
$w('#anchorFeature1').scrollTo()
}
export function anchorFeature1bot_viewportLeave(event) {
//Add your code for this event here:
$w('#anchorWelcome').scrollTo()
}
I had anchors in my 1080px homepage. Now I have a fake homepage for 1280px and anchors are still there. When I try to use anchors via main menu at the 1280px homepage, it tries to scroll me to 1080px homepage’s anchor. If I fix it via main menu links. This time 1080px homepage’s anchor breaks.
Can someone help me figure out why every time the function runs, it scrolls me back to the top of the page.
Here’s my code:
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
$w.onReady(function() {
setInterval(function() {makeResponsive()}, 4000);
} );
function makeResponsive() {
wixWindow.getBoundingRect()
.then((windowSizeInfo)=>{
let windowWidth = windowSizeInfo.window.width;
if (((windowWidth <= 1280) && (wixWindow.formFactor === "Desktop")) && (wixLocation !== "/home2")) {
//show & hide or change style properties for 720p or below
wixLocation.to("/home2");
} else if (((windowWidth > 1280) && (wixWindow.formFactor === "Desktop")) && (wixLocation !== "/home1")) {
//show & hide or change style properties for 1080p
wixLocation.to("/home1");
}
}
)}
I think it might be because the wixLocation !== “/home1” isn’t working so it keeps refreshing the page and scrolling me back up but still don’t know why it’s not working…
You shouldn’t redirect in an interval, that will just be obnoxious for your users. And the reason it’s scrolling up is that if you call a redirect from the page you’re redirecting to, it will just scroll up to the top of the page instead.
I’m going to make a new post on this topic and locking this one as it is really outdated, and there are much better approaches to this topic now. I’ll make sure to link it here when it’s up but be on the lookout!