Responsive Site Layout

Ask the community
,
1

Hi,

I just enabled developer tools for Wix Code and am exploring its capabilities. With Wix Code is there a way that I can make the site layout responsive? I want to get a more full width look. The grid lines have always been restricting so if anyone has tried this out, let me know!

Thank you.

3 Likes
2

Try to open the code and change wdith to 100% and and height to 100% should work. It’s in the end of the code normally in the Body.

3

You can change the site elements to be full width using the editor as explained here .

Best,
Tal.

4

Hi Tal, are objects such as images and text boxes responsive when placed within an element such as a strip?
Thanks!

5

Hi,
Click the Stretch icon ( ↔ ) on some of the elements above to make them full-width. Click here to learn more. Click here to vote for this feature request.

Best
Tal.

6

Hi all,
Yes, it can do as a fake responsive.
There are some inspire below,

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

$w.onReady( function () => {
//If you want to do fake responsive action inside dynamic page..
  $w("#dataset").onReady(()=>{
    let pageID = $w("#dataset").getCurrentItem()._id;
    wixWindow.getBoundingRect().then(windowSizeInfo => {
      let width948Layout = "/dynamicpage/width948Layout/" + pageID;
      let width600Layout = "/dynamicpage/width600Layout/" + pageID;
      const windowWidth = windowSizeInfo.window.width;
      //For example, page break-point are 600 < 948 < 1280...
      if (windowWidth <= 948) {
        wixLocation.to(width600Layout);
      } else if (windowWidth <= 1280) {
        wixLocation.to(width948Layout);
      } else if (windowWidth > 1280) {
        //Expand Page elements...
        $w("#container").expand();
      }
    });
  });
});

About “/dynamicpage/width948Layout/” + pageID;
it refer to the link in your page info
For example, you are doing an online store.

826Ă—282 21 KB

Remark,
For windowWidth > 1280,
All container or group may collapse or hidden before page on load. Therefore, web-user will not see unsuitable layout before window width finish.

For example,
A mobile device click the link of 1280px break-point dynamic page, the page will redirect web user to width600Layout. Web user will not see any elements on your page before redirect finish.

Hope useful,
Heson

7

Hey @arctiinase.p Rookie Coder here - how to I put this into the code? Do I add a module and referance it?

8

Ok, guys, I also want a responsive layout. Please, lets not talk about walkarounds, this is feature request section. Lets talk about how we do want it to be and when can we have it.
I would like every element to have dimensions adjustable in %, rem or vh.
The best would be implementing at least flexbox or grid layout.
Also, for elements like picture or a box I would like to have cropping/covering/aspect ratio options.
About at least one more breakpoint (for tablet and large desktop) I will find/write separate thread.
So, Wix Staff, are you planning what I wrote and when ? :slight_smile:

9

Hello Heson Li

I’m not very practical with wix code, but I’m trying to do just that!
could you explain to me how and where to apply what you say?

thanks you so much

10

I am also trying to do this, I can even see a difference between the published site on my desktop website and my laptop. Is there anyway to make it fully responsive so that my above the fold and other elements are always responding to the size of the browser

11

Hi Is there any chance this will be resolved anytime soon? really looking forward to a responsive theme.

Also how much of an effect is it having on the sites SEO?? anybody know?

12

I’ve seen hundreds of petitions like this, to have a responsive gallery/full height gallery/full screen element… I’ve been with wix for almost 3 years and still they don’t make it happen. I’m seriously thinking about changing to another platform.

13

Is there any news on timing of full site responsiveness? This is really overdue and a big gap relative to where other platforms are.

14

It has more of an indirect effect on SEO. Since google has moved to a mobilely focused ranking system, they are using page speed, bounce rate, and social presence as ranking factors. And since responsive sites tend to be faster, it could make a difference since slower sites have higher bounce rates and less shares since no one wants to use them.

You can find more info here

15

Voted for it and been waiting years! Love wix, wix code is brilliant need this for clients what do I do? Use wordpress?

16

Anyone has any solution for this? I am facing the same problem. My web Page is not automatically fitting the resolution.

17

it is showing that the container and dataset are not valid

18

if we can implement the bootstrap into it,might work but dont knosw how to do it.

19

This should have been developed into the product from the start. It is unbelievable that the sites would not be fully responsive. It is so unbelievable that I put all the effort into building a site assuming it would be fully responsive. I wish I used another platform. This is truly lame. I could never recommend this product to anyone but stupid celebrities on TV.

20

This conversation has been started since Jan 2018 and there is no even one comment from wix support team, not even a promise, are they looking to our comments??
I believe wix is one of the most expensive web builder and I decided to use it because of it’s ease of use, and capability and wide range option, but this issue really disappointed me, and I also start believe that its been designed to meet the beginners and simple websites requirement not the complicated website ones.