On.Resize function to load your Mobile version real time

Hey guys. I think I found a solution to your sites not being 100% FULLY responsive (width wise). It’s just the coding part I am missing.
I really need your collaboration on this before I place my 1y order with Wix and migrate my clients’ websites over to Wix.
Just found out that when I resize my browser to a width under 980px width my site starts to get cut off.
Please, help me find out a way to "insert’ a rule that whenever the browser width is less than 980, or say 900PX or 500PX the website automatically loads the mobile version - real tim.
That way the website will be 100% responsive and you can even write a solution to this threat right here:
https://support.wix.com/en/article/request-responsive-sites

I’ll appreciate your help on this. Also, all Wix users will appreciate this, as this is one
of the selling points that other companies pretend to be better than Wix with and it could be easily fixed with 3-4 lines of code (JavaScript or JQuerry).
It’s just I’m not so advanced coder yet to do it.

That’s what I could “invent” for one of my projects (outside of WIX) but it’s JQuerry, not pure JS and WIX doesn’t like it. If I could only convert that to JS…

$(“div”).show();
}
$(window).on(‘resize’, function(){
var win = $(this);
if (win.width() <= 800) {
$(“#sorry800”).removeClass(“hidden”);
$(“#sorry800”).addClass(“shown”);
$(“div”).not(“#sorry800”).hide();
}
else {
$(“div”).show();
$(“#sorry800”).removeClass(“shown”);
$(“#sorry800”).addClass(“hidden”);
}
});
});

Thank you!
Elvis Metodiev

Anyone?

Any updates guys? That’s quite important matter and noone seems to know the answer…

did you ever find a solution to this? This would be very useful as snapping the browser to half the screen in Windows causes elements in my header to overlap…

Hi Elvis, I personally use this code on the masterPage.js :
import wixWindow from ‘wix-window’ ;

$w . onReady ( function () {
wixWindow . getBoundingRect ()
. then (( windowSizeInfo ) => {
if ( windowSizeInfo.window.width <= 1000 || wixWindow.formFactor === “Tablet” ) {
if ( wixWindow.formFactor != “Mobile” ) { // Your conditions here
$w ( ‘#logo’ ). hide ( “fade” );
} else {
$w ( ‘#logo’ ). show ();
}
}
});
});

I forgot : you have to refresh the page, it doesn’t work on real time thought…

Why don’t you use EditorX instead ?