Global CSS Font Based Media Queries Not Allowing Manual Overriding Of Upper Breakpoint Font Sizes in Wix Studio

Ask the community
,
1

Hello Wix Community,

I’m experiencing a challenge with CSS in Wix Studio and am hoping to find some guidance or solutions from the community.

Issue: I’ve been working to set up responsive font sizes across various breakpoints using CSS. Initially, everything looks great, but I’m facing a problem where the fonts at the highest breakpoint (1802px and up) do not allow for manual overrides through Wix Studio after initial success. Lower breakpoints (down to 320px) seem to work correctly and allow for manual edits, but any changes revert or do not hold at the highest breakpoint.

AND PLEASE NOTE I DO NOT WANT TO USE SCALABLE FONTS.

Here’s an example of the most successful CSS setup I’ve used:

/* Global default (applies for 1802px and above) */
h1 { font-size: 62px; }
h2 { font-size: 52px; }
h3 { font-size: 44px; }
h4 { font-size: 36px; }
h5 { font-size: 31px; }
h6 { font-size: 26px; }
p, .p1 { font-size: 20px; }
.p2 { font-size: 20px; font-weight: bold; }
.p3 { font-size: 20px; font-weight: bold; font-style: italic; }

/* For screens 1001px - 1801px */
@media (max-width: 1801px) and (min-width: 1001px) {
    h1 { font-size: 43px; }
    h2 { font-size: 39px; }
    h3 { font-size: 33px; }
    h4 { font-size: 27px; }
    h5 { font-size: 23px; }
    h6 { font-size: 19px; }
    p, .p1 { font-size: 16px; }
    .p2 { font-size: 16px; font-weight: bold; }
    .p3 { font-size: 16px; font-weight: bold; font-style: italic; }
}

/* For screens 751px - 1000px */
@media (max-width: 1000px) and (min-width: 751px) {
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }
    h5 { font-size: 16px; }
    h6 { font-size: 16px; }
    p, .p1 { font-size: 16px; }
    .p2 { font-size: 16px; font-weight: bold; }
    .p3 { font-size: 16px; font-weight: bold; font-style: italic; }
}

/* For screens 320px - 750px */
@media (max-width: 750px) and (min-width: 320px) {
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }
    h5 { font-size: 16px; }
    h6 { font-size: 16px; }
    p, .p1 { font-size: 16px; }
    .p2 { font-size: 16px; font-weight: bold; }
    .p3 { font-size: 16px; font-weight: bold; font-style: italic; }
}

Questions:

  1. Has anyone else encountered similar issues with CSS and manual font size overrides in Wix Studio, especially at larger breakpoints?
  2. Are there known conflicts or bugs in Wix that might be causing these overrides to fail or revert?
  3. Any tips or tricks on ensuring CSS changes do not revert and that Wix’s inline styles take precedence?

Any insights or advice would be greatly appreciated. Thank you in advance for your help and suggestions!

Best, Stephen