I have found a bug with LWR Experience Builder's screen responsive property setting for Text Blocks.
Here is how I assume this is supposed to work:
- I place a text block in Experience Builder.
- I check "Override style's default HTML tag".
- I set HTML tag to H1
- I set Text Style to Heading 1.
- I switch to Mobile View Mode.
- I select text block.
- I change Text Style to Heading 6.
At this point, what should happen is that on desktop screen sizes, that text block will have an <h1> HTML tag, and the text style will use the Heading 1 styles. On mobile screen sizes (less than 768px), that same text block will have an <h1> HTML tag, but the text still will now use the Heading 6 style.
Here is what is actually happening.
- When I follow those steps in Builder & Preview Mode, it appears to be working correctly. However, when I publish the site here is what I see:
- In Desktop browser sizes, the text block has <h1> as HTML tag and Heading 1 styles.
- In mobile browser sizes, the text block has <h1> as HTML tag, but it still has Heading 1 styles except for the font weight. The font weight of the text block has changed to the Heading 6 style, but everything else about it is using the Heading 1 style.
Here are the text theme settings for Heading 1 and Heading 6
Here are the Desktop View Mode property settings for that text block.
Here are the Mobile View Mode property settings for that text block.
Here's how the published site looks when changing browser sizes (notice the text doesn't change size, it just gets bold):
I have attached a screen recording of this happening.
I have already create a support ticket:
Case #471481270
Case Title: Text Block screen responsive property settings do not work
Here is the live published page:
https://trifectatechnologies84-dev-ed.develop.my.site.com/byo2026/
@George Abboud @Alicia Teo @Julie Thompson @* Experience Cloud * #LWR #Experience Builder
There is a Known Issue for this: https://help.salesforce.com/s/issue?id=a028c00000zjpXC
If anyone else runs into this issue, there is a workaround:
- On desktop view, add in a text block component.
- Check "Override style's default HTML tag".
- Make sure the Style is set to something different than the HTML tag. For instance, if the HTML tag is set to "h1", set the Style to "h3".
- Switch to mobile view.
- Change the style of that text block to be what you want.
- Go back to mobile view.
- Change the style of the text block to be what you want.
What seems to be happening is if when you first place that text block, and you check "Override styles.." but then set the HTML tag and the style to be the same (e.g. Heading 1 style and h1 tag), then change it in mobile view, it messes it up.
