How to make my drum machine responsive?

HTML-CSS
1

Please take a look at my css: https://codepen.io/bradrar1/pen/mjbPYN

On full screen, it’s okay I think.

But when I minimize the browser it becomes messy.

  1. What will I add to the css so that when I minimize it, it won’t become messy.

  2. And how can I make the #output’s border in my code become permanent. I mean not becoming large or short when the words changes.

just like FCC’s Drum Machine https://codepen.io/freeCodeCamp/full/MJyNMd.

2

Here are some advices :

  • Don’t use px values, they’re absolute values and not relatives, consider using percentages, or em/rem values.
  • Use Flexbox when it comes to 1-D layout.
  • Use CSS Grids when using two dimensional layouts. For your drum machine, you really should try that as your layout looks like a grid.
  • If these two tools are not enough, use mediaqueries :slight_smile:
1 Like