Responsive Site - Auto adjusting strip/image to screen size

Ask the community
,
8

Presuming you are using the Wix Mobile feature for your mobile visitors, you can use this solution for anyone not viewing the mobile site.

I’ll post the answer for dynamic pages, since it should be easier to reverse engineer for normal pages.

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

$w.onReady(()=>{
  $w("dynamicDataset").onReady(()=>{
    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['your-dynamic-link'];
        let narrowUrl = thisData['your-narrow-dynamic-link'];
        if (windowWidth >= 1280 & wixWindow.formFactor === "Desktop") {
          wixLocation.to(wideUrl);
        }
        else if (windowWidth < 1280 & wixWindow.formFactor === "Desktop") {
          wixLocation.to (narrowUrl);
        }
      } );
    } );
  } );
  
  
  //or else if you need only minor tweaks you can choose to 1. show and hide 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();
       }

I created a new thread on this topic alone going into more detail and explanation, since I’ve seen this question pretty often.

Good Luck!