I have very different presentations of my web app design using dev tools mobile device on a desktop browser and my app design using a real mobile browser after deploy.

If you run my project from GitHub in your computer you'll see that the design is responsive even using "mobile device" in the browser dev tools. But if you check the project deployed through your mobile (real mobile browser, Android and IOS), you'll see that it has overflowing content from some divs when making a search using the main functionality of the app (simply search for a location and a date to see the weather forecast and you'll see that the content will overflow).

I don't know how to solve it because in dev tools mode it is working perfectly, so I can't find the problem. Could someone check it to help me, please?

GitHub repository: https://github.com/Janaina-MJ/FEND-Capstone-travel-app.git

Project deploy: https://got-a-plan.herokuapp.com

PS1: It was working perfectly until some months ago, I hadn't been working in this project in a while. I just noticed the new bug when I used the app recently.

PS2: Don't worry if the image loads out of the correct order sometimes, it's another bug that I don't know how to solve yet (because I'm learning to code).