Skip to main content
Josh22
Active Member
July 26, 2024
Question

Responsive mode in prototypes are broken

  • July 26, 2024
  • 11 replies
  • 3600 views

Why is the responsive mode in the prototype preview so broken? When you create a page with components and layers and set them to fill mode, everything fits to 100% width or height in the design editor. This reflects typical development as expected.

However, this doesn’t work in the prototype preview. When I set the prototype to responsive, sometimes it works, sometimes it doesn’t. For instance, I have a grid with cells. Those cells are set to fill. (In fact, everything in every layer is set this way). But when the prototype renders it breaks. Those cells sometimes are 100% the available area, other times they are set to their original rendered size from the frame.

For example, the cells are set to fill and happen to measure at around 200px wide because the main container (frame) fits all the content this way in design mode. But when it goes into the prototype preview with responsive mode, sometimes those cells take up the width appropriately, other times they revert back to what they are calculated at from the original main container.

Design: [ cell = fill ] (equates to ~200px or so)
Prototype: [cell = fill ] (may be 100% or may be ~200px)

Another issue, I get random fragmented lines on those cells that are not in the original styling. An artificial border that shouldn’t exist.

11 replies

Paul_Palade1
New Member
April 6, 2026

@Catherine_Desrochers, ​@Josh22 Coming back to this issue. Seems like removing the flow starting point doesn’t solve this completely. The fill behavior still breaks under responsive prototypes when going back and forth between different frames; either when navigating through designated on-click spots or when using the back buttons in mobile browsers. Tested on Chrome, Brave and Safari. The limit seems to be 3 frames. When you introduce a fourth, it will start breaking. Hey ​@zoink is this something you guys know about? 👀