I had thought that I could edit the text and images in one breakpoint without it affecting the same items in another breakpoint. For example, for mobile devices I want to use less text in the same areas than on the desktop version. However, when I edit the text in the mobile layout, those changes are also being made in the desktop layout.
I have the pages and elements set to responsive on all breakpoints. Is it possible to have different layouts for each breakpoint?
I see the setting “Use on All Breakpoints” for a section but have not selected that. Is it on by default?
Thanks!
You can change the layout and styles of each breakpoint individually but if you edit the actual text inside a text element or button for example it will of course update across all breakpoints.
If you want to do that sort of thing (more text on Desktop and less for the others) just hide the desktop text on the other breakpoints and create a new different text element with different text on those other breakpoints and hide that one from the desktop breakpoint. You can hide elements on a breakpoint by selecting it and going to the More Actions “…” options and you’ll find “Hide” there.
I think as with most things Wix it will probably cascade down across breakpoints so if you hide an element on Tablet it’ll probably also be hidden on mobile straight away, but if you hide something on Mobile it’ll not hide it on Tablet or Desktop.
If you make a mistake and want to bring a hidden element back go to the left hand Layers panel and click the eye with a cross through it icon to reveal it. This is the easiest way to see what elements on your site will appear on each breakpoint! Hope that helps!
Thanks so much for your quick and informative reply. I will give it a try!
Joe
PS: Tried it out and it does it exactly what I was hoping to do. Thanks again!
1 Like
I have finished my mobile design to my liking… how do I now design my Desktop version without effecting my mobile version whatsoever
I am afraid if I start designing the desktop version, it will ruin my hard work on mobile… how do i keep this completely seperate?
You’ve designed it backwards to how Wix works unfortunately, the whole point of the Wix breakpoint system is that it cascades down meaning the master desktop size won’t be altered by anything you do on the smaller breakpoints and the tablet sizes wont be altered by the mobile changes and so on, but you designed the smallest first which can be altered by all the other breakpoints above it, so that is just unfortunate.
Hopefully it won’t mess things up for you too badly, the breakpoints aren’t always affected by changes once you have something set it usually doesn’t get completely warped by the bigger screen changes unless you add new elements or completely change things around, it’s pretty good these days at not undoing all your work.
Just make sure any new pages you create or any redesigns take all breakpoints into account as you are working on them even if you favour one size as a priority, otherwise you might end up with a lot of work to fix things up at the end.
If you are really struggling and absolutely need all the breakpoints to be unique you can do what I detailed earlier in this thread and hide the mobile elements you’re happy with (I’d hide the whole section or sections that make up the page not individual elements like text and so on) on the larger screen sizes and then re-create your site from scratch on those bigger sizes, then of course hide these new designs from your mobile views. This is pretty extreme and I don’t really recommend it especially to do this on every page of a website, if you ever want to update anything you’ll now have to update each view independently which isn’t great, but there’s a desperate measure if you can’t make the breakpoints play nicely.
Also this post was about Wix Studio so if you are using the old Wix Editor it’s probably not what you are looking for, I think some of the stuff I mentioned will still be applicable but only Editor X and Wix Studio use the actual breakpoint system mentioned here so check what version of Wix you are using!