We are experiencing a weird issue with a LWC that is imbedded into a Screenflow Login flow. When we debug the flow in flowbuilder, the css is perfectly structured and the LWC signup form component looks beautiful. As soon as we activate the flow and test it out in a sandbox the whole components visual structure freaks out. All of the sudden certain elements on the LWC are pushed further left/right and everything seems kind of squished together. Does anyone perhaps know what can cause this?

Below is the view in the Debug view of the Flowbuilder View in the Flowbuilder Debug Screen

Below is the exact same flow but when it is active and being used as a Login Flow. The content is squished into the middle and completely overflows the original borders. View in the Sandbox when the flow is active as a login flow

I figured something out

I think I have figured it out, but I need help in knowing if its something that I can fix. It looks like there is a content div that wraps login flows in particular that sets the max-width to 400px while screen flows can normally have I think 667px width. That max-width wrapper for the content is what is destroying the styling. Does anyone have any ideas on how I can change/bypass this?

  • 5
    Please take some screenshots, I'm curious! Oct 6, 2022 at 20:28
  • Alrighty, here is a snapshot of what I am seeing. Oct 7, 2022 at 6:36

1 Answer 1


if anyone is having a similar issue. We could not find a way around the 400px width limitation we had to redesign certain elements in our login screen flow to fit the width restrictions.

  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Oct 10, 2022 at 8:06

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .