Hi Sarah! Awesome tool. As a dev who's built a lot of heroes too, I would suggest switching from using background-image to an <img> tag and handle the image sizing with object-fit: cover;. That way, devs can use srcset to pass in lower-resolution versions of the background image.

Options for left and right generated CSS

Hi Sarah,

Pretty Awesome Product you've got here.

i don't know if this is a big deal, but i noticed that the color picker for the buttons remains open and overlays within other tabs when the window isn't explicitly closed.
It still stays open when the hero-generator browser tab is closed and also when a new tab is open.

i checked the behaviour on the safari browser and it works ideally by closing the overlay window when the hero-generator tab is closed or a new tab is opened.

so i believe it is a bug worth looking at on chrome.

Screenshot

great job on this.

Description

I tested your nice tool on my mobile device (OnePlus 6 / Android 10) and noticed a small overflow-x.

Didn't debug it but it looks like related to the input fields.

It wasn't a problem at all but since I noticed it, I thought about reporting it quickly 😉

Screenshot

When I select an image to upload, I get "Upload error" most of the time. I say "most" because I tested 4-5 times and it failed, then it worked, and now it won't work.

Consistently, this image works:

And this image (and others) are failing:

Devtools don't really say anything clear that I can see.

Great project. It feels like there should be a way to randomize the image, perhaps from Unsplash.