Prototype displays well in Figma mirror and desktop but not mobile browser

My prototype is displaying all content on Figma mirror and desktop browser but when I use my mobile browser to display the it parts of the prototype is cut off and I can’t view it on my mobile browser which is also what most people use to view the prototype.

I removed the device, changed the viewing options, nothing works. I can’t test because the tab bar is important for the testing and it’s not being displayed.

If your prototype displays well in Figma Mirror and on desktop but not in a mobile browser, there are a few potential reasons and troubleshooting steps you can take:

  1. Browser compatibility: Different web browsers may interpret and render web pages differently, especially on mobile devices. Make sure that you are testing your prototype on commonly used mobile browsers, such as Chrome, Safari, Firefox, and Edge, to ensure compatibility. It’s also important to check if the version of the mobile browser you are using is supported by Figma.
  2. Responsive design: Figma allows you to create responsive designs that adapt to different screen sizes, but it’s important to ensure that your prototype is designed to be responsive and mobile-friendly. Double-check that you have created appropriate responsive design components and layouts in Figma to ensure that your prototype displays correctly on mobile browsers.
  3. Device viewport settings: Mobile browsers use viewport settings to determine how web pages are displayed on different devices. Make sure that you have defined appropriate viewport settings in the HTML code of your prototype to ensure that it displays correctly on mobile browsers. Viewport settings include attributes such as width, initial-scale, and user-scalable, which can affect how the prototype is rendered on mobile devices.
  4. Image and asset optimization: Large image or asset files may take longer to load on mobile devices and can affect the overall performance and display of your prototype. Optimize your images and assets for mobile devices by compressing images, using appropriate file formats, and reducing file sizes to ensure faster loading times and smooth display on mobile browsers.
  5. Check for errors: Review your prototype in Figma for any errors or issues, such as missing or misaligned elements, overlapping layers, or incorrect component settings. Fix any issues that you find to ensure that your prototype displays correctly on mobile browsers.
  6. Test on actual devices: While Figma Mirror provides a close representation of how your prototype may look on a mobile device, it’s always best to test your prototype on actual mobile devices to accurately assess its performance and display. Test your prototype on different mobile devices, including smartphones and tablets, to identify any specific issues and make necessary adjustments.

If you have tried the above troubleshooting steps and your prototype still does not display correctly on mobile browsers, it may be helpful to seek further assistance from the Figma community or support channels for specific guidance on how to resolve the issue.

hey thank you for your prompt response i tried viewing this with other prototypes including ones i didn’t work on and the problem persists, it’s like if the element is fixed on a part of the frame as long as that part is outside of the device frame it won’t show up, for now I have set the tabbar to scrollable so we can at least test the app

Hi there. I was wondering if you ever got this issue resolved. My team is experiencing something very similar where we’ve programmed a frame to stick to the bottom of a set of screens. It works perfectly in mirror mode, but not on browser.

Hi, Unfortunately i couldn’t so i had to reduce the screensize until the fixed content could be viewed as such I could only test for iOS. I’m still not sure why this is happening as it wasn’t an issue with figma before.