Appearance of game on mobile better

[Edrol97]

Hi all,

I've been toying around with many elements of my site this week and am wanting to make the functionality for mobile better. I've got a wordle style game on the site which can be accessed by the following link. My issue is it currently looks very different on mobile. I want to make the boxes appear smaller. I was thinking it would be

@media (min-width: 768px) {
  .inputs {
    width: 20%;
  }
}

but I have tried this and it didn't work. Really appreciate any help you can offer!

 

[Johna]

Perhaps you meant to use max-width instead of min-width?

 

[Edrol97]

Perhaps you meant to use max-width instead of min-width?

I did but how do I change the size of the input boxes?

 

[tomliv]

I did but how do I change the size of the input boxes?

Tough one. Here's a quick sample I whipped up:

game test

Adjust as needed. You might have better luck with this structure and manipulating the label background rather than the input.