Responsive design problems with flex items

Hi everyone,

Just need some help on a challenge i was working on. So i was doing a challenge on scientist tributes and decided to do one on Thomas Edison by having his names in lights/bulbs. To ensure everything fit properly i utilized fixed width and heights for the working area. I then lay out each letter and had the bulbs fill the spaces in a flex manner with wrapping. The letters and size are correct in the desktop version, however, i would like to make a responsive version for mobile and smaller view widths.

Now this poses a problem where i used a certain number of circles in the letters and they fit perfectly at that size, when i change the dimensions of the name area from fixed to responsive units such as % or em, all the light bulbs that are in flex containers jump all over the place, it becomes a great big mess.

If anyone has any suggestions on how i can change this such that all the lights and the name are responsive based on the browser size, i would highly appreciate any feedback, comments, suggestions.

Link to the page:

You should look into grid-template. Since you are wrapping around each letter with divs, you can dynamically change the position of each letter based in widths using media queries.

Thanks for the suggestion. grid template works for the letter positions. Do not know if it will work for the circles within each letter div as i did not have a specific number, just used flex to fit them in. Will try and see if i can fit those in responsively as well

This super worked well. I replaced all the flex with grid so it resizes quite well. Thank you for the solution!

1 Like