Reputation: 1
Me and my team are currently developing a website for some company (All made for us, recent juniors). Since the beginning of the project, we had tried to use the best practices we could. We manage 7 media queries for our style sheets (320px, 480px, 768px, 920px, 992px, 1200px and 1400px) and until now, everything was fine. The site on development looks good, on Netlify looks good, and published looks also good. Here is where the problem is. We notice that when you open the website, following the link in the Facebook app and scrolling through the website on the IAB, on some devices, most of the styles are broken. Currently, we notice this only on a Poco C65 and Moto g20 (the devices of the people who had this behavior from the site). On the same devices, if they open the site on their browsers, everything looks fine. Since we can't do any kind of "debugging" directly, because the problem is only on the Facebook IAB, we don't know what the problem is or how to solve it. It would be so slow if I make some changes on the code, make a build, upload the build to Netlify, share the Netlify site on a private Facebook post, and open it on an Android emulator to see if something changed, and so on until I make some significant changes.
Did some of you had this problem in the past? And if you do, how did you solve it?
This is our site (It still needs a lot of work, we know, but at this moment we only need the site working and responsive) (https://codigogeek.com.mx/).
The project is made with React + Vite.
I have been searching for information from this issue in the last 2 days and barely found something really useful. Also tried to use normalice.css and some reset.css but nothing works.
Upvotes: 0
Views: 138