What are you trying to do? (please be as specific as possible and include relevant screenshots, code snippets)
There is a component called “Smaller title with underline 2”. It has a slot where the text is placed. The component provides the appropriate styling and variations for screensizes (e.g. smaller font-size on mobile).
In the markup above, you can see the span with class __wab_slot-string-wrapper ρsw gets a CSS style of font-size:15px.
This overrides the styles on the element above __wab_slot ρs ρcSq5, which has font-size 36px.
The “Text” component in the slot does not have any font-size changes in Plasmic:
How can I get this to work again?
What are the reproduction steps? / Relevant links:
Sadly, the affect pages are on an authenticated page
@steve_1234 hi!
Can you try unsetting the font-size setting for the text element that contains the “edit profile” text?
Also, just to confirm, how do you set the font-size on the parent element?
I tried adding it to the vertical stack element through the style, which seems to work.
This is a temporary hack, we have some work in progress to allow having font-size and color properties on all elements, not just the text ones, so that you can add it through the design tab.
The text element that goes in the slot doesn’t override any fonts - pressing Remove Font styles didn’t do anything.
However, after experimenting a bit I noticed these
- Adding a data-test HTML attribute to the text in the slot adds the attribute
- Adding a style HTML attribute to the text in the slot does not add the style element - I was hoping to use font-size: inherit !important
- Changing the colour of the text in the slot seemed to apply a new CSS class to the HTML element that renders the text in the slot, rather than using the .\3clsw CSS class (see screenshot in original post) that applies the 15px
Since changing the colour seems to fix it, I have changed the colour of the text to be one hex digit different.
This seems to fix it
1 Like
@steve_1234 another potential easy approach would be to just pass string props into the component, and use it as value for your text component.
