Mobile editing destroys my desktop view and vice versa

Ask the community
1

Why is desktop version changing when I edit mobile version and vise versa? How to prevent that or how to even make the design proper on all views when this is happening? I have been searching and searching, but can’t find a good answer. Please, really need urgent help.

After talking to the WIX Chatbot, it says that changes I do on mobile should not affect the desktop version, but it does for me…

I have been researching this for so long, I really need help, please.

2

Are you using the regular Editor or Studio?

3

Hi! :slight_smile: I am using Wix Studio.

4

Mobile phone being hang because of memory problems

5

In Wix Studio, website design adapts to different screen sizes (breakpoints) like mobile, tablet, and desktop. Here’s why edits on mobile can sometimes affect the desktop view:

  • Cascading Styles: Changes you make on larger breakpoints (Desktop) do automatically flow down to smaller ones (Mobile/Tablet) to a certain extent. This ensures a consistent starting point for your design.

The “Catch”:
However, edits on mobile can also unintentionally affect the desktop view due to several reasons:

  • Ungrouping/Restacking: Ungrouping elements on mobile might disconnect them from their intended layout on Desktop. Similarly, restacking elements on mobile can influence their stacking order on Desktop, causing unexpected shifts.
  • Taking Elements Outside Boxes: Let’s say you have a container box on Desktop that positions several elements together. If you edit the mobile view and drag an element outside of this box, it might unintentionally break free from the container on the desktop view as well. This disrupts the originally planned layout.

Wix Studio display a small notification in the editor’s lower section when you perform actions that affect all breakpoints

to avoid unintended desktop changes when editing mobile, follow these tips:

  1. Simplify Mobile Edits:
    When editing the mobile view, prioritize adjusting complete sections or blocks of elements. This minimizes the chance of unintentionally affecting the desktop layout

  2. Double-Check Desktop View: Always preview your desktop view after making mobile changes to catch layout surprises caused by cascading styles.

  3. Maintain Element Hierarchy: Be mindful of the container boxes and element relationships when editing on mobile. Avoid accidentally taking elements outside of their designated containers, as this can affect the Desktop layout.

By understanding cascading styles and these best practices, you can maintain control over your website’s responsiveness across different breakpoints in Wix Studio.

6

I wish I could hire someone like you even for my simple little site I am struggling… Should never have use a Wix template… much too sophisticated… they should have warning lables… lol… 26 hrs in and have to start again…

7

Wix Studio is far too complicated and not user friendly at all. The logo for the site was very small on the mobile version and when I adjusted it, it had disappeared of the desktop version. Other alterations I made also reflected on the desktop, despite my being careful to create stacks and not overlap elements. I can’t check back to the desktop version every time a change is made - that would take far too long. I’m not going to spend hours trying to re-adjust my site according to these instructions. It is has taken me far too long to make all the adjustments even on the desktop version as it is. I made the mistake of creating the troublesome site on Studio not knowing what a headache it would be. I produced another site on Wix Editor which was far easier to operate. If I had been able to transfer my Studio site to Editor I would have done but that option was not available. I think I shall be looking at other web building sites at the end of the year.