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?

1 Like
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.