-2

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. Picture 1

Here you can see how I can freely move horizontally, this doesn't happen on dev tools or android devices. Picture 2

Also when I press the mobile burger the whole layout shrinks a bit. Picture 3

Jorge Limas
  • 148
  • 1
  • 12

1 Answers1

1

it is because the top part "flex-shrink-0 flex items-center". I entered a "max-width: 100%;".

avmilch
  • 26
  • 4
  • Incredible, I have been chasing this issue for 2 days and finally decided it was something else, while all the time it was just a misunderstanding on the flex-shrink-0..... THANK YOU SO MUCH! – Jorge Limas Aug 14 '22 at 22:42
  • It seems the issue is with the h-full, both changing the flex-shrink-0 or adding a h-8 solves the issue, again, thank you!! – Jorge Limas Aug 14 '22 at 22:47