Responsive design problems with flex items

HTML-CSS
1

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:

2

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.

3

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

4

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

1 Like