How to Set Font Sizes Separately for Mobile, Tablet, and Desktop in Wix Studio Gallery

Question:
How can I set different text styles (especially font sizes) for each responsive breakpoint (desktop, tablet, mobile) in a Wix Studio Gallery Slider without changes on one breakpoint affecting the others?

Product:
Wix Studio Editor – specifically the Pro Gallery set as a Slider.

What are you trying to achieve:

  • I want to adjust the text size (title and description) in the gallery differently depending on the viewport:
  • On desktop, the font size looks perfect.
  • On tablet and mobile, the text appears too large, covering most of the image.
  • Ideally, I want to define a different text size per breakpoint, so the gallery remains visually balanced and legible across all devices.

What have you already tried:

  • I edited the Text Design settings using the Design tab and Font Picker.
  • I noticed that changes made on tablet or mobile also affect the desktop version.
  • I haven’t found any native breakpoint-specific style settings inside the gallery settings.
  • I’m open to using Velo by Wix or custom CSS workarounds if needed.

Additional Information:

  • I’m using Wix Studio, not the classic Wix Editor.
  • The gallery is set to a slider layout inside a responsive section.
  • The title and description overlay the image.
  • Font style changes apply globally across breakpoints, which is what I’m trying to avoid.

import wixWindowFrontend from “wix-window-frontend”;

// …

wixWindowFrontend.getBoundingRect().then((windowSizeInfo) => {
  let windowHeight = windowSizeInfo.window.height; // 565
  let windowWidth = windowSizeInfo.window.width; // 1269
  let documentHeight = windowSizeInfo.document.height; // 780
  let documentWidth = windowSizeInfo.document.width; // 1269
  let scrollX = windowSizeInfo.scroll.x; // 0
  let scrollY = windowSizeInfo.scroll.y; // 120
});

Using the following code → you can get the resolution of your current sreen.
Once you know the exact current resolution user is working on, you can generate further code to control text-size by custom css code, maybe.

If you’re heading down the route of using CSS, it’d be better to use media queries to define breakpoints (that match the breakpoints in the editor). It’ll end being a cleaner dev experience.

That said, the pro gallery doesn’t support CSS.


It does seem like this is the behaviour of Pro Gallerys (same text across breakpoints). Depending on your needs and layout, you may be able to achieve the same design with a repeater or layouter, which would give greater control over things like text.