Identical Responsive Text Settings Result in Different Font Sizes Across Pages

Ask the community
, , ,
1

Hi everyone,

I’m experiencing a strange issue with responsive text sizing in Wix Studio and I’m running out of ideas. I would really appreciate any help.

I have text elements on different pages that are supposed to behave identically. Their typography and responsive settings are the same:

  • Font: Manrope
  • Weight: Medium
  • Responsive behavior: Proportional Scaling
  • Maximum font size: 20 px
  • Minimum font size: 15 px
  • Line height: 1.3 em
  • Same text style (“Paragraph 2”)
  • Same desktop breakpoint

The problem:

At a screen/canvas width of around 1280 px, the text on both pages is displayed at the same size.

However, when increasing the screen width, the texts start behaving differently.

At 1800 px, for example:

  • On Page A, the text correctly scales up to 20 px.
  • On Page B, the equivalent text only reaches 18 px.

So Page B seems to stop scaling correctly as the viewport gets wider.

Interestingly, when I select the text on Page B at 1800 px, Wix actually displays 18 px as the current calculated font size, even though the maximum is set to 20 px. If I manually change the displayed 18 px to 20 px, nothing changes visually.

What I have already checked/tested

I have compared the two pages and so far cannot find a relevant difference:

  • Same font, weight, text style, min/max size and line height
  • Same responsive behavior (“Proportional Scaling”)
  • Same desktop, tablet and mobile settings
  • Same breakpoints
  • Same canvas width when comparing them
  • Same page maximum width: 1600 px
  • “Apply max width” is configured identically
  • Sections are virtually identical in width (1263 px)
  • Parent stacks are virtually identical in width (approx. 1101/1105 px) and both use relative width
  • No relevant difference in the section or stack layout settings
  • I selected all text within the text box and reapplied the typography settings to rule out hidden/local text formatting
  • I changed the responsive behavior to Fixed as a test – this did not explain or resolve the issue
  • I checked tablet and mobile for possible breakpoint overrides – they are identical as well
  • I checked the page-level settings and both pages use the same maximum width

The most interesting test was this:

I copied the exact same text element from one page to the other.

The copied element changes its scaling behavior depending on which page it is placed on. In other words, the issue seems not to be stored in the text element itself.

The same element behaves correctly on Page A and scales to 20 px at larger widths, but when placed on Page B it behaves like the other text elements there and remains smaller.

This makes me suspect that there is some page-level or parent-level scaling reference, hidden responsive setting, editing-size setting, CSS/design-set behavior, or possibly a Wix Studio bug that I am missing.

Has anyone experienced this?

What could cause two otherwise identically configured pages to calculate proportional text scaling differently at larger viewport widths?

In particular, is there any page-specific scaling/reference width or hidden setting in Wix Studio that affects how Proportional Scaling calculates the actual font size?

Any ideas would be greatly appreciated. I have already spent quite a bit of time trying to isolate this.

Thanks!

2

Without having a look at it myself I would change the text style to something other than Paragraph 2. This is used by Wix in other areas/apps and can sometimes have scaling issues I have found in the past. I usually set paragraph 2 too not scale in the Site Styles before I design and havnt had issues since.

If that does not work then I would assume it has something to do with a parent element or the section. Not the actual text element.

Also if you are only adjusting the text by 2px I would set it as fixed and pick either 18 or 20. (only a designer will notice the difference)

3

@AggroJavi the detail about copying the same element between pages and watching its behavior change is the key clue, that rules out the text element, the style, and even the typography preset. In Wix Studio, Proportional Scaling isn’t calculated from the element’s own min/max alone, it interpolates between the page’s breakpoints, and breakpoints are set per page (or per section if you’ve broken a section off its own breakpoint set). Two pages can report the same canvas width in the editor and still scale differently if their underlying breakpoint ranges don’t match exactly, for example if Page B was duplicated before a breakpoint was adjusted on Page A, or if a section on Page B is pinned to a different breakpoint set than the page default.

Check: open the breakpoints panel (bottom of the editor) on both pages and compare the actual breakpoint widths, not just the page max width. Also check whether the text sits inside a section that shows its own breakpoint override icon, sections can opt out of the page’s shared breakpoints. If the breakpoints match exactly and it still differs, the next thing to rule out is a stale cache on the editor’s size calculation, closing and reopening the page (not just the panel) forces it to recompute.

If this helped, please mark it as Solved.

4

Thank you so much for reaching out!
I changed the text size for every single text and now it works! :slight_smile:

5

Thank you so much! I did it my own way, because the question was on hold so long, but your way sounds really good! It worked :slight_smile:

6

Hello @AggroJavi,

Glad it’s working now, and thanks for the update. Good luck with the rest of the site.