How To Make Your WiX Website Look GREAT on ALL Screen Sizes | WiX Classic Editor | Responsive Design (2024)

Table of Contents
Introduction Content FAQs

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.

How To Make Your WiX Website Look GREAT on ALL Screen Sizes | WiX Classic Editor | Responsive Design (2024)

FAQs

How To Make Your WiX Website Look GREAT on ALL Screen Sizes | WiX Classic Editor | Responsive Design? ›

If you are having issues with how your site looks on different devices I recommend you contact Wix Support. It looks to me like you most likely have some elements outside the Editor Gridlines. Elements outside the gridlines may not be seen on smaller screens.

Why does my Wix site look different on different screens? ›

If you are having issues with how your site looks on different devices I recommend you contact Wix Support. It looks to me like you most likely have some elements outside the Editor Gridlines. Elements outside the gridlines may not be seen on smaller screens.

How do I make my Wix website more responsive? ›

We recommend using full-width elements on your site. If you are using elements such as text boxes and images that can't be stretched to full width, make sure to keep them within the vertical grid lines so that your elements appear correctly on most screen sizes. Click here to learn more.

What is the screen size of Wix Editor? ›

The width of your site is fixed at 980 pixels. This size was chosen to accommodate the majority of site users and ensures compatibility with the many different smart devices being used today (i.e. iPads or tablets).

What aspect ratio should a Wix website be? ›

We recommend:

Og:images should have an aspect ratio of 1.91:1. This means that the width should be 1.9 X the height to avoid cropping issues. Your image shouldn't be larger than 8MB.

Why does my website look different on different monitors? ›

Users should check to make sure their display properties are set to 32bit color. Some users also override font sizes, say to make fonts bigger. This can cause pages to look somewhat off. Additionally monitors maybe calibrated differently, and some may appear darker or lighter depending on the monitor/computer used.

What is the weakness of Wix? ›

Disadvantages of Wix: No interchangeable templates

Make sure that whatever template you pick is your go-to because if you happen to change your mind later, you will have to manually transfer all of the content you have created initially from your old template to the new one.

How do I make my website 100% responsive? ›

How to create a Responsive Website
  1. Set Appropriate Responsive Breakpoints.
  2. Start with a Fluid Grid.
  3. Take touchscreens into consideration.
  4. Define Typography.
  5. Use a pre-designed theme or layout to save time.
  6. Test Responsiveness on Real Devices.
Dec 8, 2022

What is the correct size to ensure the best performance of a Wix page? ›

For best results, upload images of at least 2560 X 1440 pixels in resolution. Wix automatically optimizes your images for best online quality and fast download. This means that, unless your file is over 25MB, you do not need to resize or compress it before uploading. Site pages can frequently be several screens long.

How do I test my website at different screen resolutions? ›

To experience your site's functionality on various screen resolutions, we recommend using the actual devices you'd like to test, rather than third-party tools. If you don't have access to certain devices you'd like to view your site on, you can use Google Chrome's DevTools to simulate them.

What resolution should a Wix banner be? ›

If you plan on creating a Wix banner, then the dimensions you should use are 940 x 726 pixels. It's always important to have a stunning website, so use one of our banner templates to spice up your website!

What is the size of full screen website? ›

The standard webpage size uses a maximum width of 1440 pixels for Desktops. This is because most desktop resolutions use a wider resolution nowadays (1920x1080). However, most websites are fully responsive nowadays, which means they won't use fixed dimensions.

What is the best website layout size? ›

What is the best screen size to design for?
  • Design for desktop displays from 1280×720 through 1920×1080.
  • Design for mobile displays from 360×640 through 414×896.
  • Design for tablet displays from 601×962 through 1280×800.
  • Check Google Analytics and optimise for your target audience's most common resolution sizes.
Mar 27, 2023

What image format is best for Wix website? ›

JPEG files have enough image quality for most sites on the web. If you have special image requirements, and you want to upload high-quality images or images with a transparent background, PNG is the best format.

What are the best image dimensions for a website? ›

Best image size for websites

Pixel width: 2500 pixels is perfect for stretching full-screen across a browser in most cases. Any image smaller than that might get cut off or appear blurry if it needs to fill the browser width.

Why does my Wix website look different on mobile? ›

Wix automatically creates a mobile-friendly site for you using the content and elements from your desktop site. They are not different sites, just different views of the same site. Your mobile-friendly site is optimized to fit smaller screens, and the layout is changed accordingly.

How do I make my website look the same on mobile and desktop devices on Wix? ›

Click Settings in the top bar of the Editor. Click Mobile Friendly. Click the Mobile Friendly toggle to enable or disable it. Click Close.

Should websites look the same in every browser? ›

It is completely normal for websites to look different from browser to browser and monitor to monitor. ; However, it is important to make sure that these changes are purely cosmetic and not functional.

Top Articles
Latest Posts
Article information

Author: Sen. Emmett Berge

Last Updated:

Views: 5345

Rating: 5 / 5 (60 voted)

Reviews: 91% of readers found this page helpful

Author information

Name: Sen. Emmett Berge

Birthday: 1993-06-17

Address: 787 Elvis Divide, Port Brice, OH 24507-6802

Phone: +9779049645255

Job: Senior Healthcare Specialist

Hobby: Cycling, Model building, Kitesurfing, Origami, Lapidary, Dance, Basketball

Introduction: My name is Sen. Emmett Berge, I am a funny, vast, charming, courageous, enthusiastic, jolly, famous person who loves writing and wants to share my knowledge and understanding with you.