I’m experiencing a weird issue with the mobile responsive layout of a website.
The address is https://melec.vercel.app/
On desktop using dev tools > responsive, it works correctly, also on any android device you get the correct mobile experience but in iOS devices (tested on 2 iphones) the website renders incorrectly, it seems to have the double of the actual available screen width.
For reference I’m using tailwindcss, tailwindui and nextjs.
In this image you can see the scroll bar for horizontal movement.
Here you can see how I can freely move horizontally, this doesn’t happen on dev tools or android devices.
Also when I press the mobile burger the whole layout shrinks a bit.
>Solution :
it is because the top part "flex-shrink-0 flex items-center".
I entered a "max-width: 100%;".