Mobile screen-white areas

12lybg · 2024-07-05T22:12:44.044Z

How can I fix this problem? In the mobile version of my app I can scroll to the right and to the bottom outside of the main area, I want to stop this, how can I do it?

Screenshot_20240706-000539540×960 94.6 KB

This is the page properties:

Captura de pantalla 2024-07-06 000756605×725 34.2 KB

Someone showed me this to follow this example:

スクリーンショット 2024-07-05 9.46.02694×650 37.1 KB

So I tried adding a condition but I don’t have the option ‘Max width’ for the page.

Codebyjamal · 2024-07-06T09:44:28.934Z

Make sure that no element has width that’s bigger than the max screen width

12lybg · 2024-07-06T13:48:52.208Z

Hello, you mean that I should make sure that no element has max width bigger than the page max width? If in the page there is an element that has max width bigger than the page max width is this the reason why I can scroll outside the main area and see the white areas?

12lybg · 2024-07-06T13:57:35.529Z

I just realised the page doesn’t have a max width and the elements won’t show their max width, maybe this problem is due to a virus?

fastforma · 2024-07-06T14:17:02.395Z

The max width is different from the min width or fixed width. If you set a max width of 200px, your element will be smaller or equal to 200px. So if the element only needs to be 150px, it will take up just 150px and not 200px.

For your problem, as @Codebyjamal mentioned, you probably have an element on your page (it could be anything: text, block, image, etc.) with a min width or fixed width greater than your screen width. This causes the overflow issue you’re experiencing.

Additionally, make sure to inspect all elements on your page to ensure none of them have a width that exceeds the screen size.

12lybg · 2024-07-06T14:37:52.807Z

fastforma:

This causes the overflow issue you’re experiencing.

Hello, what you said makes sense, thank you very much!! I will check