Question re mobile optimisation, How to solve squashed elements issue when clicking on input?

Question

Hi, everyone. I just posted my first game see below link. I notice everything gets squashed on a mobile device when the user clicks on the input field. Could anyone please suggest how to fix this? Thanks 👍
https://code.sololearn.com/WlPLF8alR0Di/?ref=app

Answer 1

Avoid fixed widths and heights: Instead of using fixed pixel values for element sizes, consider using relative units like percentages or vw/vh (viewport width/height).

Implement responsive design: Use CSS media queries to apply different styles based on the device's screen size.
@media only screen and (max-width: 480px) {
/* CSS rules for mobile devices */
}

Use the viewport meta tag: Make sure your HTML file includes the viewport meta tag in the head section.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

I hope this helps you 🙂

Answer 2

Great thank you, tried your suggestion. it worked 👍