Responsive Site Code Help

@David - SKmedia @J. D. @Alec McCutcheon Please get back to me soon, thank you😁😫😥

Is there any correct layout of coding so that i can copy and edit on my site please?

Hi i need help badly on how to make a site responsive. 😣As i am not sure of the coding above because i am new to Wix and i really hope to be able to make a site responsive. Please get back to me soon, Thank you so much😄

Okay well that makes sense I changed it and it's still working lol, Just don't know the in and outs of javascript so little things I don't catch

David - SKmedia said "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." that was a comment on the code that I had originally posted not after we had made changes so don't know if this still applies or if I should try to get rid of the interval don't know how it's going to run when it needs if it's not on an interval. But thought I would add his 2 cents in.

I've also tried that to but will switch it back, I let path = wixLocation.path; so i don't see why that wound't work.

Idk here's my last code iteration for the day.. scrolling issue is still happening on home1 then when i make the browser smaller it switches to home 2 and scrolling works but it don't switch back then the browser gets bigger. same code on both pages.

import wixWindow from 'wix-window';

import wixLocation from 'wix-location';

$w.onReady(function() {
let p = wixLocation.query.p;
if (p){wixWindow.scroll.to(0, Number(p), {scrollAnimation: false})}
setInterval(function() {makeResponsive()}, 400);
} );

function makeResponsive() {
wixWindow.getBoundingRect()
.then((windowSizeInfo)=>{

let windowWidth = windowSizeInfo.window.width;
let scrollY = windowSizeInfo.scroll.y;
let path = wixLocation.path;

if (((windowWidth <= 1280) && (wixWindow.formFactor === "Desktop")) && (path[0] !== "home2")) {

//show & hide or change style properties for 720p or below
wixLocation.to("/home2?p=" + scrollY);

}
else if (((windowWidth > 1280) && (wixWindow.formFactor === "Desktop")) && (path[0] !== "home1")) {

//show & hide or change style properties for 1080p
wixLocation.to("/home1?p=" + scrollY);

}
else {}
}
)}

my url appears as ....wixsite.com/newsite/home1?p=0 or ....wixsite.com/newsite/home2?p=0 the dots are in place of the rest of the link. does the 0 or 1 in the wixLocation.path[ ] refer to order they appear in the url, like if their was a page that was /newsite/home/page then would it be wixLocation.path[1] ?

actually the switching only works one way I can switch to home2 but not back to home1 and as you know home 2 don't have the scroll issue either, almost like its not running on that page or something

still trying to figure out the wixLocation.path[1] !== thing

okay so i fixed the switching by using /home1?p= instead of /newsite/home1?p=

so confused now lol, even if i remove the wixlocation !== check. the site still won't switch when i check the browser size now.

is the .path different for each page or will they all be the same

using the same code on both pages

Oddly enough the scrolling thing doesn't happen when I'm on home2

I can see in the URL that after the ?p= is accompanied by my current scroll position that changes in real time.

Okay now it's still not switching and it's doing the scroll thing again.

Code:

import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
$w.onReady(function() {
let p = wixLocation.query.p;
if (p){wixWindow.scroll.to(0, Number(p), {scrollAnimation: false})}
setInterval(function() {makeResponsive()}, 400);
} );
function makeResponsive() {
wixWindow.getBoundingRect()
.then((windowSizeInfo)=>{
let windowWidth = windowSizeInfo.window.width;
let scrollY = windowSizeInfo.scroll.y;
if (((windowWidth <= 1280) && (wixWindow.formFactor === "Desktop")) && (wixLocation !== "/home2")) {
//show & hide or change style properties for 720p or below
wixLocation.to("/newsite/home2?p=" + scrollY);

}
else if (((windowWidth > 1280) && (wixWindow.formFactor === "Desktop")) && (wixLocation !== "/home1")) {
//show & hide or change style properties for 1080p
wixLocation.to("/newsite/home1?p=" + scrollY);

}
else {}
}
)}

Okay sweet definitely on the right track now :) but its not switching anymore i probably didn't implement it correctly or something

Here's the new code:

import wixWindow from 'wix-window';
 
import wixLocation from 'wix-location';

$w.onReady(function() {
let p = wixLocation.query.p;
if (p){wixWindow.scroll.to(0,p, {scrollAnimation: false})}

setInterval(function() {makeResponsive()}, 400);
} );

function makeResponsive() {
wixWindow.getBoundingRect()
.then((windowSizeInfo)=>{
let windowWidth = windowSizeInfo.window.width;
let scrollY = windowSizeInfo.scroll.y;

if (((windowWidth <= 1280) && (wixWindow.formFactor === "Desktop")) && (wixLocation !== "/home2")) {
//show & hide or change style properties for 720p or below
wixLocation.to("/newsite/home2#p=" + scrollY);

}
else if (((windowWidth > 1280) && (wixWindow.formFactor === "Desktop")) && (wixLocation !== "/home1")) {
//show & hide or change style properties for 1080p
wixLocation.to("/newsite/home1#p=" + scrollY);

}
else {}
}
)}

First you should explain what the purpose of these lines in your code (I don't see where you use them):

let scrollX = windowSizeInfo.scroll.x;
let scrollY = windowSizeInfo.scroll.y;