Getting new code to work on mobile

[memorydata]

Hello, around 3 days ago as of writing this, I posted this issue about getting names under the images of the picker. You gave me edited code that did this, and I wanna thank you again for that! I ended up closing the issue, when I probably should've kept it open to report on problems as I noticed them, that was my mistake.

My issue now is that the buttons end up looking cramped and forced to the right side on mobile.

Normally, I would shrug this off, but I noticed that the Favorite Pokemon Picker and other pickers made using the same source code had the character options "scaled down" on smaller devices such as mobile phones.

I believe it's the new HTML I added from the last issue that changed something, and I'm curious if it's possible to still have the name + text underneath while having the buttons scaled down. I understand if this isn't possible, due to the changes necessary by adding the character names underneath.

For reference, here's the code as of right now (with most of the character IDs removed, since I currently have around ~600,) and if possible, I'd appreciate your help a lot, but I completely understand if it isn't.

Thank you again for making this picker, and making the code open-source! It's been really fun to work on.

[antialiasis]

Right, should have checked that as well. On mobile the actual list items get shrunk down by default, but with the added wrapping, the image span element remains the same size. You'll want to find the media queries:

@media (max-width:636px) {
    .item-list {
        line-height:75px;
    }

    .item-list li {
        line-height:75px;
        height:75px;
        width:75px;
    }
}

@media (max-width:423px) {
    .item-list {
        line-height:50px;
    }

    .item-list li {
        line-height:50px;
        height:50px;
        width:50px;
    }
}

And then add resizing for the .image and .image span elements as well, e.g.

@media (max-width:636px) {
    .item-list {
        line-height:75px;
    }

    .item-list li {
        line-height:75px;
        height:75px;
        width:75px;
    }

    .item-list li .image {
        height:81px;
        width:81px;
    }

    .item-list li .image span {
        height:75px;
        width:75px;
    }
}

@media (max-width:423px) {
    .item-list {
        line-height:50px;
    }

    .item-list li {
        line-height:50px;
        height:50px;
        width:50px;
    }

    .item-list li .image {
        height:56px;
        width:56px;
    }

    .item-list li .image span {
        height:50px;
        width:50px;
    }
}

The bit where the items are further to the right than they should be seems to be because the ul element has a padding; you should be able to fix it by adding padding:0; to .item-list.

[memorydata]

My main issue now is that selecting an option appears to resize the image. On desktop, it's slightly obvious, but on mobile, the images end up being just a fraction once the option's selected. Thank you for your help so far.

[antialiasis]

Apologies for taking a while to get back to this, I've had no free time in the past couple days.

Here's a fixed version; I had to switch the images to images that worked locally for me to properly see what I was doing but you're going to want to replace the whole item list with yours at any rate. It's possible I reverted some changes that you did deliberately here; hopefully it won't be too complicated to remake them. Let me know if you're having any other problems.