Symbol Styles Ignoring Custom Breakpoints in Widgets

[Gaurav-spr]

I am experiencing an issue related to the recent introduction of support for a fourth breakpoint in Builder.io. While using Symbols to create custom components, I have observed that the responsive styles set through custom breakpoints function correctly within the Symbols pages. However, when these Symbols are utilized within a widget entry, they do not adhere to the custom breakpoints. Instead, styles are applied based on the default breakpoints, leading to visually incorrect outputs.

Details for Debugging:

• Space Name: Vishvesh S Space
• Space Public API Key: 04a0ecade74f48f4b8534e7a16969739
• Symbol ID: 06ab0e014b7643b0a41357b37a02ded7
• Entry ID Using the Symbol: 21fbe117ab67431aabeb06843cf3475b

Steps to Reproduce the Issue:

1. Create a Symbol with responsive styles defined for custom breakpoints.
2. Insert the Symbol into a widget entry.
3. Observe that within the widget entry, the Symbol’s styles correspond to default breakpoints rather than the custom ones.

Additional Information:

• Builder Content Link: Symbol Content
• Code Stack: Next.js with React integration

[ParthSharma]

Hi Gaurav​,

I was troubleshooting your problem and checked in the builder and live environment. There is a slight difference in the area space around your symbol. Is that what you want highlighted?

I am attaching both screenshots. Please have a look and let me know.

Thanks,