Responsive Site - Auto adjusting strip/image to screen size

Ask the community
,
1

I’m trying to something like this for my home page:

http://moenave.com/

Is it possible to have a strip or image automatically resize it’s height depending on the screen size like in the example above?

The scrolling feature where it switches between images each time you scroll would be nice to do as well, but not as important.

Thanks!

7 Likes
2

Any input on this?

3

Also looking for a response to this please

4

So basically what you are saying is that if I make my web-site using wix on the screen resolution that is larger than the screens that people might have then they are out of luck and won’t have my web-site displayed properly. Why such a thing is overlooked by Wix?

5

I don’t think this has been resolved yet as most recent post was only a month ago, but maybe some movement has happened or someone knows code to add (if even possible) to make responsive layouts? It’s pretty standard for websites to auto resize now and days so hopefully this get’s Implemented in the future.

6

I would definitely also like to know how to do this, please

7

Yeah does anyone have a bit of code that might work? I can’t have my images be full width but I need them quite big still, the margin restrictions are just a massive waste of space for me, when scaling up and down doesn’t seem like it’d be too hard.

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!

9

I’d like to know this too. I have 5 images in my Wix Gallery strip (horizontal), but when I preview and resize the page, a horizontal scroll bar appears and some of my images get hidden. Most all professional websites have responsive features, so your images get smaller or larger depending on how the user resizes the browser. But the layout remains the same. No scroll bars get added and you see the page consistently how it was, just smaller or bigger.