Introduction
Ever design your entire WiX website only to discover that it only looks good on a wide screen or small screen?
Are parts of elements getting cut off or spaced weirdly?
Watch this!
In this video I explain how to build your website so that it looks great on all screen sizes - even in the classic editor!
Have questions? Need some magic done on your website ASAP?
Hit me up: www.eitanwaxman.com/contact-me
Hire me on Wix Marketplace:
www.wix.com/marketplace/wix-partner/eitan-waxman
My Facebook page:
www.facebook.com/eitanthedev Join the community on Facebook:
www.facebook.com/groups/thewixwiz
Content
Hi there amitan and welcome to Wix fixer today I'm going to be showing you how to make sure that your website looks really good on different screen sizes using the regular classic Wix editor.
So let's get started.
Okay, so for this video I prepared a very simple mock website.
As you can see, it's my responsive website on Wix and I have some images background and it's built like any simple uh one page website would be built and, as you can see, if I go into preview mode here on this wide screen that I have the website looks pretty good um everything fits on the screen and you can see everything in the header and everything in all of my sections, but we have one small issue and that is if I look at this website on a smaller screen size.
So let me show you that, so this is what my website looks if I change to a smaller screen size and as you can see, a lot of the elements are cut off at the edges and I can barely see anything in my header, and this is what will happen to you.
If you design your Wix website on a wide screen- and you don't make sure that you're doing everything that needs to be done to make it adaptive to different screen sizes and that's what I'm going to be showing you right now, so how can I make sure that this Wix website will look good, no matter what screen size it's on, so the first step will be to zoom out.
Okay I always recommend zooming out a little bit if you're working on a smaller screen.
If you're working on a larger screen, then you might see it without zooming out.
But you can see here.
There are two lines that are framing my website and the rule is that everything that you want people to be able to see on any screen size needs to be between those two lines.
So what I could do is I could just drag my text in between those two lines and that will make sure that no matter uh, if my screen is wide or uh thin.
We will see all of these elements on the screen, and this is pretty good and I'm going to show you how this looks on my wider screen as well.
So I'm dragging everything in this image is okay, if it's a little off and here on the side, I'm going to drag in my header elements and I have some header elements that are have run away here on the side, so I need to zoom out even more and drag those all in and great.
So this looks pretty good um and if I view it I'm going to go Zoom back to 100 for this screen size and I'm going to preview my website and now we can see that pretty much everything is in view.
So that's a good temporary fix.
But if I show you this again on my wider screen, so this is how it looks again on the wider screen after I made those edits, and you can see that it looks okay, but it's a little awkward because everything is kind of scrunched up here in the middle and the sides are quite blank.
So there is one way that we can deal with that in the classical Wix editor, and that is if we go back to the editor, what I can do is I.
Can uh split my section up into columns using a strip uh- and this is a very recent uh addition to Wix in the sense that we have sections and strips.
So what I need to do here now is I need to go over here.
Add an element.
Add strip and I can just add an empty strip here, and in this case, because I already have a nice background here.
I can just actually um change my strip background and maybe make it completely um transparent, and then what I can do with this strip is I can split it into columns.
So if I go here into layout, I can add a column, and this basically splits my strip into two parts and I'm going to move this strip down, so that it's not on top of any of my other elements and I'm just going to move this, so this guy got caught over here, so I'm going to move him back up, and here I have my strip and now I'm going to rearrange my elements in these two columns, and it's very important.
You see.
I have two new lines here in each column, and the rule of thumb is that whatever is between these two lines within each column will show on any screen size, but anything, that's outside of them will only show on a wider screen.
So now what I can do is I can take.
For example, my text and my button and I can move them onto my strip and make sure that they are over here between these two lines.
Okay, so these this text is between the two lines.
My button is between the two lines.
Maybe I'll move it a little more to the right and let's do something similar for the planets.
What I'm going to do is I'm going to put this planet over here um and move this planet over here and you might need to adjust sizes and stuff like that, depending on what your requirements are.
Let's say: I'll adjust the size a little bit I think this planet is under my strip, adjust the size a little bit there and make sure that it's inside of my column, excellent and now I'm going to drag my strip back up great and now, if you take a look and you preview it on this wider website, so I'm going to click here preview, you can see that it's still um it's.
It looks good on this wide website as well, and the elements are not too close to each other.
I don't have as much Blank Space here on the sides and if I show you how it looks on my thinner screen as well.
So here's how it looks on my thinner screen and, as you can see, the elements still fit well into the screen.
So everything is present and nothing is overlapping and it looks good on this screen size as well, and you can add more than two columns to each strip and arrange your elements in the way so that they are spread out on a wider screen size and are not overlapping or hidden on a smaller screen size, and that is the key to making your Wix website look good on many different screen sizes, and this is a mistake that I see on a lot of websites and if people can't see some of your content, then it looks unprofessional and they can't access, maybe an important button.
This is a super important part of designing your website on Wix, and you can do it also for the header over here and for any other part of your website.
If you need a website that is super responsive on lots of different screen sizes- and you don't want only this adaptive feature, then you can also use editor X, which is really designed to be more responsive.
Last but not least, you're going to want to check out your mobile view so switch to mobile and make sure that your website looks good on mobile as well, and then your basis should be covered.
So thanks for watching this, video uh don't forget to like And subscribe.
If you have any questions or comments, you know where to put those and I will see you next time.
