Potential glitch with parameters (Max Web Design Magic Course follow up)

[referee]

Hi,

I’m currently working through the Web Design Magic Course and have encountered a challenge with the “Advanced Parameter Concept: Building a Custom Type Scale” lesson.

Everything worked fine until I got to the Header Sizing Parameter’s setup. I incorporated styles into the Global CSS and connected the JSON directives to the Component’s configuration. But when I enabled responsive behavior by adding "isVar" : true it started to glitch.

The font scale adjusts if you have. default scale and play with the main breakpoint (all breakpoints at the same time). However, if mobile breakpoints are set to different font scale settings they are not reflected in preview nor on the live page. Only the toggles are changing in the settings but not the font size itself.

And after setting different font scales for different breakpoints any changes of the Size are not reflected anymore even at the main breakpoint until you reset and set them back to the same one.

I can not figure out what is wrong or maybe that is a glitch.

[ruenel]

Hey John,

Thanks for writing in! I cannot replicate the issue on my browser when logging in to your site. This is what I am seeing.

• See the secure note below.

Thanks.

[referee]

Hi @ruenel,

Thanks for quick reaction.

Here is the screencast to illustrate what I mean. I also double checked that on front-end test page with the inspector tool it confirmed that the scale didn’t change properly.

I made mistake with the comments in my video. On the landscape mobile breakpoint it started to react to the toggles after returning back to the default +1 scale but changed it globally to all screen sizes.

Here is JSON for size toggles:

Here is root CSS:

[tristup]

Hi John,

I have tested the page in the Chrome browser in the Windows, and it works perfectly fine without any glitch that you reported here. I would suggest you please mention the device, browser name and version, and also the operating system you are using; that helps us to replicate the issue at our end.

Thanks

[referee]

Hi again Tristup,

I am using Intel MacBook PRO (Core i9) with Mac OS 15.0.1 (24A348)

The issue appears in the same fashion across all browsers I tested: Google Chrome, Yandex Browser, Brave, Firefox, Safari and Microsoft Edge.

[charlie]

On the headline component I didn’t see the parameter wired up. Does that fix your issue?

[referee]

Hi @charlie,

It seams like using syntax {{ dc:p:setup.fontSize}} instead of {{param.setup.fontSize}} fixes the issue.

Apparently Twig syntax causing that glitch with the font scaling on my instance on some reason. At least that is what I can conclude at the moment from all the experiments I’ve made. In all other cases of using Twig format for linking parameters worked just fine for me so far.

[charlie]

I gotcha. isVar parameters won’t work with Twig right now, but we can update that. Have a great day.