CODEWITHSUNDEEP
javascripthtmlcss
Exeter
Exeter

Reputation: 11

Mobile browsers resize textareas when entering input

I'm designing a rudimentary note-taking PWA, and my website (https://cloudwerewolf.github.io) works fine on desktop browsers and when launched from home screen on mobiles as a PWA, however when run in a mobile browser from navigating directly to the link, all textareas shrink when one of them is clicked on and I want the textareas to stay the same size as before instead of shrinking. Is it because of the keyboard skrinking the perceived width of the screen or is there another cause, and how can it be fixed?

EDIT: found & fixed the problem:

@media screen and (orientation:landscape) {
    textarea {
        width: 43.5%;
    }
    #notehead {
        width: 20.5%;
    }
    #reH {
        font-size: 24px;
    }
}
@media screen and (orientation:portrait) {
    textarea {
        width: 80%;
    }
    #notehead {
        width: 35%;
    }
}

When the keyboard appeared on my screen, CSS decided that the orientation was now landscape due to the viewport width now being less than the viewport height, and changed the sizes of the textareas and font sizes accordingly. I took out that chunk of code and replaced it with width percentages for the portrait mode placed into the regular textarea{} and #notehead{} CSS areas, with maximum widths in pixels to prevent the textareas from becoming too wide on desktops.

Upvotes: 0

Views: 567

Answers (1)

J Johnson
J Johnson

Reputation: 145

In your CSS you are configuring your textarea to be min-width: 80%, so when the screen size is reduced the textarea will reduce until it reach the limit (80%) from here, the textarea won't reduce.

Try, maybe reducing the min-width: 80% to min-width: 20%

Please try to show your code in the question, we can help you to solve the problem in this manner not just putting a link to your website.

Upvotes: 2

Related Questions