I'm having some trouble with a React website I built. I've worked through a lot of the project and understand the structure fairly well, but I'm facing some display issues. Everything looks fine on iPhone, but when I test it on Android, some drop-down texts overlap and the search bar's placeholder text is scaled incorrectly, causing the layout to mess up. I've tried really hard to fix it and even consulted various AIs, but the problem persists. Any advice would be greatly appreciated!
2 Answers
It sounds like you'll need to focus on making your CSS responsive for different screen sizes. Using media queries could help you adjust the layout so that it displays correctly on both iPhone and Android devices.
If you're having issues with UI across devices, make sure to check your CSS for compatibility. The issue you described is likely happening because the styles you've applied might only be catering to iPhones. Test your CSS on various screen sizes to ensure it looks good everywhere.
Thanks for the tips! I thought I modified the CSS, but I'll double-check that everything is set up for responsive design.