Search code examples
javascripthtmlcssresizeresolution

Resizing Elements For Mobile Devices

I know this is probably a very common question, but being new to HTML, CSS, JS. I really wanted a direct answer, so I'm sorry if this is a duplicate.

I'm currently working on a wordle clone and I'm having trouble with the sizing for the mobile devices. On my computer, the sizing looks perfect. However, when I access it on my phone the keyboard at the bottom seems to be really small.

If I could get some assistance with fixing this issue that would be great! Thanks!

Here is my relevant HTML code:

<meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale =1, user-scalable=no">

Here is all my relevant CSS code:

.keyboard-row {
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.key-tile {
    /* Box */
    border: 1px solid lightgray;
    width: 5%;
    height: 40px;
    margin: 1px;

    /* Text */
    font-size: auto;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

The mobile verson looks like this: Wordle clone on mobile

Solution

  • Try using rem unit instead of pixels(px) in your css while styling your keys and text as the rem and em helps to adjust relative to your parent container and helps to make the items reponsive. or you can also make use of media queries to fix your problem. Hope that this might help to fix your problem.