I got a issue with my website on mobile after launching it? [closed]

an issue arose after the launch of my first website. The mobile version looks different and worse on my iPhone X and iPhone 6s. I used both google chrome and Safari on them. Here are some screenshots: Image is not proper, No spacing between items,Linear Gradient all around box. The issues are that the image doesn't display properly, no spacing between items in screenshot 2 and linear gradient covers the whole box.

I also checked the website on an old android phone and the screenshot 1 image displays properly on the old android but the rest of the issues do not.

I used many responsive website tools to check the responsiveness on mobile such as the Google Mobile-Friendly Test and the pixelemu mobile test and everything seems to look fine when I look at the mobile versions. I also used the inspect element in chrome and checked different mobile versions and its fine too.

This is how it should look:Main Image,Features Spacing is proper,Linear Gradient proper look

Here is the link to the website: http://www.playechobeach.com/

Does anyone know what could cause this issue on the mobile versions?