Issue with Updating Styles for different breakpoints/ devices

Ask the community
,
1

I am having issues saving font sizes for different breakpoints (Desktop / tablet / mobile) - it seems that if I update one style, the specific styles are getting changed on the other 2 devices.

Using: Wix Studio Editor

Essentially I am trying to make adjustments to the font sizes to the different device layouts (breakpoints), but when I go under the design panel, input the new size for let’s say H2 on mobile, and say “update styles” it then increases the H2 style for both tablet and desktop as well even though I would like for them to be treated as sepearte media queries. Is this a glitch?

It is starting to get frustrating because I finish making adjustments to the Desktop style and then move on to the next device and update those styles which somehow effect/overwrite the Desktop styles as well…

Please advise. Thank you!

2

I used to have the same issue. The way WIX works is from largest to smallest. In the example, we will just state that we have 3 views:

Desktop
Tablet
Mobile

Any changes you make to Desktop, will apply to Tablet and Mobile.
Any changes you make to Tablet will apply to Mobile.
Any changes you make only apply to Mobile.

What you should do is complete your design in Desktop, then make the revisions to Tablet, then Mobile.

Also, if you’re using a Global Element(stuff in your library), be advised that modifying that element while on mobile will cause changes in other views as well.

Hope This Helps

2 Likes
3

Thanks so much Christopher, will keep this in mind and see how - if that works for me! Appreciate it!

4

So I just did it again and am running into the same issue. I started setting the styles for Desktop, and then hit the “Update Styles” for Desktop, then tried doing the same for Tablet and Mobile but it changes the others. Is the trick not to update the styles? I am confused. Thanks!

5

OK,

When you update the styles for the Desktop, it will change it for the smaller sizes.

When you update the styles for the smaller sizes, it doesn’t change the bigger sizes.

So start with the Big Size, update it, then work on the smaller sizes.

If you change your style for the whole site, it will change everything. So if you update a style from the styles panel on the left, its global and affects all breakpoints. You will need to just update that one element from the right-side panel. When you work with the element settings from the right side panel, what I mentioned before applies.

So for example, if you want to change a text Heading for only Desktop to H2 from H1, do so on the Styles Panel, then switch to Tablet and Mobile and update the size from the Right Side Panel and Desktop should remain the same while the others are changed.

Hope This Helps

1 Like
6

Thanks Christopher!

So here is what’s happening:
I have indeed only been adjusting using the"Design" panel on the right side, but no matter which breakpoint I am updating it effects the other sizes.

I would expect it to ONLY update the adjustment for that particular breakpoint, but it effects the other breakpoints. :frowning:

Here is a screen recording that illustrates the issue:
I started out with the Desktop H2 style. But you can see how when I change the tablet h2, it increases the Desktop H2 and also changes the H2 mobile style as well…

Screenshare

I am really at a loss. It should be straight forward: Styles should just be saved for the particular breakpoint. I can’t make sense of it.

The only way it works is if I don’t “update styles” after setting the Desktop style default (which wouldn’t make sense since I would want to update styles for each breakpoint.

Any help much appreciated. Thanks!