[BUG] - Sites made using nextui look very weirdly aligned and cropped out on mobile phones.

[aludayalu]

Describe the bug

I have tried a lot of different solutions on stackoverflow but I am unable to fix the issue. Whenever I create a website using the nextui library (which I love btw), it ends up looking very good on my pc. It is very responsive on my pc at even mobile like resolutions and aspect ratios. But whenever I open it on my mobile phone it looks really bad. Half of the UI (on the right and left side) is not accessible in the DOM and looks cropped out.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

To reproduce the issue you can create any website via the nextui library which has components grouped into rows and columns. It will look the way it is expected to on desktops but its behaves weirdly on mobiles.

Expected behavior

I expected the ui to be looking fine on mobile devices.

Screenshots or Videos

No response

Operating System Version

Windows and Android

Browser

Chrome