How To Make Your WiX Website Look GREAT on ALL Screen Sizes | WiX Classic Editor | Responsive Design
ฝัง
- เผยแพร่เมื่อ 27 ก.ย. 2022
- 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!
New to Velo? Try my new Velo for Beginners course:
www.udemy.com/course/velo-for...
Have an idea for a video? suggest it here:
www.thewixwiz.com/youtube
Have questions? Join the discussion:
www.thewixwiz.com/forum
Want to have joint coding session? Book one now:
www.thewixwiz.com/book-online
Have questions? Need some magic done on your website ASAP?
www.thewixwiz.com/contact-us
Follow along on Twitter @thewixwiz
Facebook page: / thewixwiz
Facebook community: / thewixwiz
Thanks for watching! I'd love to hear if this helped and what other challenges you have encountered while building your website on WiX👂
Great content. You explained everything very nicely. I am facing problems with the mobile version. The desktop version looks good but when I move to mobile version, everything gets crappy.
I have to try this I hope I can get it to work. Content look but my logo was all the way over to the left in the header, so when I reviewed it on my iPad it wasn’t there, I couldn’t see it.
For some reason mobile on Samsungs is scrunched, but iPhone is fine? Any thoughts?
You've done a great job presenting the "solution", which is still very limited by modern standards. Your site will look outdated because the elements won't reshuffle, resize, and move around like they do on most MODERN websites. All we get is some "shrinkage", that's it. Wix should hurry up and modernize their editor (without requiring Editor X).
whats a good competitor thats more modern?
@@factskitty Wix Studio, if you wish to stay with that brand
@@TaskSwitcherify Sir, Wix owns EditorX (Now Wix Studio I think)
@@miteshmhatre3403 That's what he's saying. Wix should modernize the editor to be responsive like Editor X, without having to use Editor X which is a separate design platform with separate templates.
Wix needs an update really bad. The mobile editor is terrible
Exactly why do we gotta do all that
@@ShantesTravelThings Their mobile editor almost makes me want to go to a competitor. It's terrible
There used to be a tool in the mobile editor that did a fairly good job at formatting the mobile version to look like the desktop version. Unfortunately this disappeared in the recent Wix update. Discussed with support but they were uninterested and simply said the tool is no longer needed in the new version. Incorrect! It is now almost like having to build two separate web sites. Terrible!
Facts. I hate it so much
I want to change other editor badly, but because I took long time for the current design, it could cost more time for changing to their competitor. It’s horrible.
I am glad I saw this while creating my page instead of after. It definitely helps. Ty!
Just what I needed. The column and strip advise will sort my problem Thanks!
cheers mate this is genuinely very straight forward and helpful
This is exactly what I needed. Thanks, very helpful.
👍 Thanks for watching!
this was REALLY helpful! thank u so much! well-explained 👏👏
Thanks for this video! This will help my friend's website look more polished and professional, and hopefully help her career too (:
Thanks a lot, my header buttons were overlapping but your solutions helped me fix it!
My pleasure! Thanks for your support!
Thank you so much for this!! It was driving me insane.
I can't Believe it. So you're telling me after I just spent an entire year editing my website to perfection that now I'm gonna have to go back and rearrange each and every single element on the whole thing? No way
Yeah ive got the same problem. Designed my site in 1080p and need to optimise for 2k and 4k. Complete nightmare
Thank you pal! You saved my website. ❤
This was very helpful. Thank you!
you are an absoulte genius. thank you very much for this video : )
thank you so much that’s really helpful
Bro you came in clutch!
really good suggestion! Thanks a ton :)
This man just saved my website.
THANKYOU SO MUCH!! I was dying!
Really Really Thank you for this Great solution
so useful, thanks!
This is nice and all unless on certain resolutions you don't want to move the elements attached far apart
If you want more control over the design at different breakpoints you should take a look at Editor X.
@@thewixwiz isn't editor x another monthly fee? Makes me feel like Shopify is a better website builder.
Thanks, very helpful👍
A year old but still very helpful. Thanks for this video!
I can't thank you enough! This was so helpful and what a relief. I thought I had to pay more for Editor X, I'm just a small business and chose Wix for the pricepoint. Little did I know the functions are this limited
Happy it helped!
Thank you for the video. I noticed that your colored gradient background image is still cropped when you change your display settings from a higher resolution to a lower resolution (e.g., widescreen to HD). Is there a way for the background image to resize adaptively with the resolution so it is not cropped? This is the trouble I am having. Thank you for any info.
Helpful, thanks
great vid!
THANK you!
I love you bro ❤ thank you so much
Thanks bruv!
The Wix resizing for other devices is really bad. Thanks for the tip!
Thanks!
Great vid
Thank you
Thanks a lot
TY ❤❤
This is good but what if there is a banner as a single element/image ?
THEN nothing haha
I have a simple subscription based site and I want to upgrade by adding strips and a transparent background panel. How do i resize my strips and get the same background color as my panels?
Great vid thank you! is there a way to do this for the top navigation bar too? my logo vanishes on a smaller screen!
Thanks! Yes, you can implement these same principles in the header.
Great video @The Wix Wiz. Can buying any premium plan from wix also helps to solve this automatically, or do we have to di it as strip and column manually?
Thanks! Buying a premium plan will have no effect on the design (except for removing the ads).
Thank you very much!! I only have 1 question. How can I add more than 2 columns on the strip? It gives me options to adjust percentages between two. Like 50/50 or 40\60
Thanks for watching! Through the settings/layou panel of the strip you can add more columns and adjust their sizes.
Had I not searched for this I might've hired someone from Wix already and paid more
is there a way to make text scale in WIX? or to make a small enough desktop screen force to mobile view/layout?
Not with the classic editor. On Editor X you can.
Gee fkn whizz Wix sucks
god bless you >3
I have a question, my strip background is my banner it has an image and text on it, on my ultra wide monitor and my second 27 monitor it’s perfect but on a small device like the iPad 11 inch it’s cropped and part of the text is not showing. The text is built into the image so I can’t move it manually.
Hey, thanks for commenting and sharing about your project!
I offer viewers two options for getting assistance with their projects:
1. My free forum: thewixwiz.com.com/forum - I try to address questions there at least once a week. Please support your question with code snippets, screenshots, and even video.
2. Offering my services as a developer. You can schedule a consult at thewixwiz.com/book-online or fill out this onboarding form: thewixwiz.com/client-onboarding
I appreciate your support and thanks for watching!
Thank you so much for the tutorial is super useful.
I have just a problem with navigations arrows in the banner, I can see them on a wide screen monitor but Wix crop them out of the view when I switch to the laptop screen, and I can't move them freely like a button.. can you help me? I also have a very annoying white border on left and right of the banner in the wide screen view..I tried everything but I can't get rid of..
Thanks for watching! You can check if the element you are using has a stretch property.
@@thewixwiz Thank you. I resolved redoing completely the element, this time as element>Interactive>Slideshows. And now is responsive, Idk what kind of element was the first time (it was a website originally made from someone else).
im having problems with my strip image sizes. I have uploaded 4k images for best quality, and have converted them into JPG files for wix. When I set these images as strip background they are stretched and zoomed. When i zoom out on my browser to -200% the images are still stretched from edge to edge... I am trying to figure out how to resize my entire wix website but in the toolbar option the Width is grey'd out and locked making height the only thing I can adjust.
Is there anyway to re-format my website to be a standard 1920x1080? right now it seems my website is 4K..even when I adjust margins on site it just create white spaces so my screen fit image is not truly a screen fit. It says the standard page size is 960px but again, when I zoom out on browser you can see the footer being stretched from edge to edge, meaning the site is not standardized on 960x but rather 4k or 8k.
contemplating on leaving wix when I called and talked to technical support they told me to purchase editor X ( a completely separate platform than wix) and integrate that into my site if i wish to change site size.
Strips can be stretched either to screen or to page. If the image is the strip background it stretch accordingly.
If you wish to discuss this further please post your question on the forum along with supporting screenshots:
www.eitanwaxman.com/forum
I have 2 buttons on my screen, one fills the whole of the left side of the screen and the other fills up the whole of the right size (I'm going for a minimalistic design lol) and whenever I view the website on a different sized screen, it doesn't look good and so I've watched this video but I can't seem to be able to make use of strips along with buttons to make the website responsive. Please help me
Using velo you can make non button elements act like buttons. Probably your best bet
@@thewixwiz Thank you so much, I'll try it tomorrow and let you know what happens!
Hi, I just made a website in wix and try to make it responsive.
It works well in preview mode (desktop & mobile), also live site on my tablet and my phone.
But the problem is, in some mobile devices it appear like this:
when the page reload, it displays correctly, but after seconds, the screen going slightly outside the device screen width,
leaving white space and looks like the page cut off.
So the user have to drag it to the correct position.
Anyone can help to fix it? so it will be responsive for all devices.
Thankyou.
This is something I would reach out to Wix support about
I've asked this question on another of your videos, if you only have a laptop to design your website would the columns expand on a wide screen monitor?
The columns will expand but the elements inside will remain the same. (Classic Editor)
Thank you.
is there other ways where we can just adjust it via code at the html editor?
No... Wix doesn't allow direct access to the DOM
Thank you 🌸 I Would ask about browsing my website by mobile in Desktop site Chrome screen size looks different, is it normal?
Yes that is normal on the Classic editor! The website decides which version to display based on the device type.
@@thewixwiz Thank you so much, now I have a great website. How can I reverse content from the left to the right side? I wanna add Arabic language. 😶Can you help me plz?
hello this is great how about when it shows for the phone? it shows there is a huge gap
You should be able to adjust that in the mobile editor!
@@thewixwiz I was not able too do you have a different video I can watch to guide me if so! please send me the link!! Thank you!!
The menu links work on desktop but hidden on mobile. How to fix I tried everything!
Hi, please reach out on the forum with screenshots and an explanation of your problem. eitanwaxman.com/forum
so i made my two columbs out of my strip but my columbs just have one dotted line instead of two like yours? how can i get two dotted lines?
From the column settings you can decide the placement. Center, right or left.
@@thewixwiz You can explain where this setting is? I do not have any options for this in column management
Can you make a tutorial in how to create a loading page?
Thanks for the suggestion!
i have a large photo i want to fit...so columns won't work...it looks good on large screen but not on tablet. what can i do to have that fit properly? thank you
Hey, thanks for commenting and sharing about your project!
I offer viewers two options for getting assistance with their projects:
1. My free forum: thewixwiz.com.com/forum - I try to address questions there at least once a week. Please support your question with code snippets, screenshots, and even video.
2. Offering my services as a developer. You can schedule a consult at thewixwiz.com/book-online or fill out this onboarding form: thewixwiz.com/client-onboarding
I appreciate your support and thanks for watching!
Can u show how to add expand on click search bar to wix
Hi Bhavesh, can you share a link to a website with a similar feature?
@@bhavesh516 I have a video coming out soon about toggle buttons which I think will help you. If not let me know.
@@thewixwiz waiting
Can you show us how to do this but on a widescreen and a phone?
Widescreen would follow the same principles! Mobile adaptiveness works a little differently. It will basically reflect what you see in the editor on all mobile screen sizes.
Yeah so shouldn't wait take that into very major consideration because I don't know how where to put strips so how am I supposed to do it which needs to be a little bit redesigned that you don't have to put strips everywhere actually I'm experiencing this problem and you notice exact problem that being described over here I don't know what where what went to do I hope Wick support is actually able to help me and put the strips where they need because I would not know where to put it
This may help you: th-cam.com/video/rXtoeZygJbY/w-d-xo.html
What about mobile??? The dang thing throws the images all at the bottom for 2 column layout! I put the images below the headings and the image laps over the text! Can't change the HTML either? VERY lame usability so far in Wix!
On mobile you have the option to switch the order of the columns within a strip with the up and down arrows. Also you can make additional edits by moving around elements to suit your needs.
@@thewixwiz i realized i gotta make the mobile site separate from desktop. So it's ok.
What about the length?? I am struggling with it to look same at different screen sizes
Very legitimate question - unfortunately not possible to adjust height based on screen size in the Classic Editor...
THEN WHICH EDITOR?@@thewixwiz
this has been frustrating me all day, for the website just decides to make decisions for me and restrict me from making simple movements. It feels more like a puzzle than an empty canvas. I'm fed up
Have you tried the new Wix Studio?
Very useful. Thank you!🫡
My logo comes out extremely small each time I put I, idk what to do anymore.
Hey, thanks for commenting and sharing about your project!
I offer viewers two options for getting assistance with their projects:
1. My free forum: thewixwiz.com.com/forum - I try to address questions there at least once a week. Please support your question with code snippets, screenshots, and even video.
2. Offering my services as a developer. You can schedule a consult at thewixwiz.com/book-online or fill out this onboarding form: thewixwiz.com/client-onboarding
I appreciate your support and thanks for watching!
How about on Editor X?
Here you go:
th-cam.com/video/sYNThLzRu_4/w-d-xo.html
The website that I creates in Wix are not responsive please help me.
Hey, thanks for commenting and sharing about your project!
I offer viewers two options for getting assistance with their projects:
1. My free forum: thewixwiz.com.com/forum - I try to address questions there at least once a week. Please support your question with code snippets, screenshots, and even video.
2. Offering my services as a developer. You can schedule a consult at thewixwiz.com/book-online or fill out this onboarding form: thewixwiz.com/client-onboarding
I appreciate your support and thanks for watching!
Hey
My site is not responsive... like at all. My text is all in the safe zones and when the screen size is adjusted, it just cuts is off anyway.
Hmmm if you would like us to take a look please provide the details and screenshots on the forum:
www.thewixwiz.com/forum
recreating the home page strips has become a nightmare. sections with strips and strips for partitions with columns... so far a nightmare unresponsive to mobile screen. the previous strip home page was easily responive. hours and hours and hours of trying to get it right.
Sorry to hear ..
Is there anyone worrying about auto-shifting of elements on Wix?
For the life of me wix refuses to have my tablet view look right
If tablet view is a priority to you you may want to consider Editor X
this method completely destroyed my mobile site, totally unusable and now need to completely get rid of all the strips. DO NOT DO THIS METHOD
Sorry to hear you think that, please note that any changes you make to your desktop site affect your mobile site and you may have to readjust it. Good luck with the rest of your site!
Can I just say, I hate tablets.
😅
I've got a question. WHY we need to put everything inside the grid that wix show us and not doing it by its self like HTML or CSS does?
As a platform Wix restricts access to the DOM. As to why, it's probably a mixture of security and trying to prevent DIYs from messing things up.