Components with Responsive Element Parameters

[ThriveMedia]

Hey guys,

I’m having a problem working out the best way to approach responsiveness with text based components such as headings and text. The components are ideal for setting up the font settings e.g. size/colour/font family so it makes sense to use them.

However, once you start defining element parameters you lose access to responsive features that are only available on the original element such as adjusting the font alignment for each screen size.

Obviously, a heading or text component would be used all over the site. So, I want to know the best approach to handling this?

I wish there was a way to expose the element’s settings in the component - but that does’t seem to be an option. Could you suggest a way I could handle this situation?

Thanks,

Matt

[ThriveMedia]

Could it involve using breakout mode? Just a thinking it through before you guys answer!

[charlie]

Adding isVar to your parameter JSON will enable you to be able to change the breakpoints of your parameter.

See the guide here on “Responsive Parameters” for more info. Have a great day.

Parameters | Themeco Docs

{
  "fontSize" : {
    "label"   : "Font Size",
    "type"    : "font-size",
    "initial" : "1em",
    "isVar"   : true
  }
}

[ThriveMedia]

Thanks @Charlie!