Responsive to screen size

Could someone please help with the responsiveness to the screen size with this please. The buttons responsively resize within the div margins and so does the text but the buttons will not stay inline-block when the screen is reduced to phone size. The challenge is complete I just need to tweak the css.

<style>

#drum-machine {
  background-color: #00FE00;        
  width: 80%; /* % of the parent container or screen if no parent*/
  max-width: 720px;  
  border: 10px solid black;
  border-radius: 30px;
  margin: auto auto;
}

#drumpads {
 width: 95%;
 padding-top: 50px;
 padding-bottom: 10px;
 margin: auto auto;
}

.drum-pad {       
  border-width: 3px;
  border-radius: 10px;
  width: 100%;  
  font-size: 5em;
  font-family: Stencil;  
}

.drum-pad:hover {
  cursor: pointer;
}

#display {
  background-color: red;
  width: 40%;
  Font-size: 2em;
  max-height: 2.5em;
  margin: auto auto;
  margin-top: 0.5em;     
}

#display-div {
  padding-top: 30px; 
  width: 100%;
}

.center {
  text-align: center;
}

#instructions {
  margin: auto auto;
  width: 100%;
  text-align: center;
  font-size: 2rem;  
}

.display-inline {
  display: inline-block;
}

</style>


<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
  <title>Drum pad Machine</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
</head>


<section>
  
<div id="instructions">
  <p>Hit the corresponding letter on your keyboard or click on a drum-pad letter below to activate a sound provided by the Free Code Camp organisation. The name of the sound will also be displayed!</p>
</div>
<br>
  
<div type="container" id="drum-machine"> 
     
  <div id="display-div" class="center">
    <p id="display">DRUM PAD</p>
  </div>
       
  <div id="drumpads" class="center">

    <div id="first3buttons" class="display-inline"> 
     
      <button onclick="playQ()" id="Heater1" class="drum-pad left-aligned">Q
        <audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" class="clip" id="Q"></audio>
      </button>
    
      <button onclick="playW()" id="Heater2" class="drum-pad">W
        <audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3" class="clip" id="W">           </audio>
      </button>
    
      <button onclick="playE()" id="Heater3" class="drum-pad">E
        <audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3" class="clip" id="E">
        </audio>
      </button>
     </div>
    
     <div id="second3buttons" class="display-inline">
      <button  onclick="playA()" id="Heater4" class="drum-pad">A
        <audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3" class="clip" id="A"> 
        </audio>
      </button>
    
      <button onclick="playS()" id="Heater6" class="drum-pad">S
        <audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3" class="clip" id="S">   
        </audio>
      </button>
    
      <button  onclick="playD()" id="DscOh" class="drum-pad">D
        <audio src="https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3" class="clip" id="D">
        </audio>       
      </button>
   </div>

   <div id="thrid3buttons" class="display-inline">
    
      <button onclick="playZ()" id="KicknHat" class="drum-pad">Z
        <audio src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3" class="clip" id="Z">         </audio>
      </button>
    
      <button onclick="playX()" id="Kick1" class="drum-pad">X
        <audio src="https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3" class="clip" id="X">         </audio>
      </button>
    
      <button onclick="playC()" id="CevH2" class="drum-pad">C
        <audio src="https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3" class="clip" id="C">    
        </audio>
      </button> 
     </div>  
    </div>
  </div>
    
</section>

<script>

//* plays audio on mouse press //*

function playQ() {
  document.getElementById("Q").play();
 document.getElementById("display").innerHTML = "Heater1";
}

function playW() { document.getElementById("W").play();
document.getElementById("display").innerHTML = "Heater2";                 
}

function playE() { 
  document.getElementById("E").play();  document.getElementById("display").innerHTML = "Heater3";
}

function playA() {
  document.getElementById("A").play();  document.getElementById("display").innerHTML = "Heater4";
}

function playS() { document.getElementById("S").play();
document.getElementById("display").innerHTML = "Heater6";
}

function playD() {
document.getElementById("D").play();
document.getElementById("display").innerHTML = "DcsOh";
}

function playZ() {
document.getElementById("Z").play();
document.getElementById("display").innerHTML = "KicknHat";
}

function playX() { document.getElementById("X").play();
document.getElementById("display").innerHTML = "Kick1";                  
}

function playC() {
document.getElementById("C").play();
document.getElementById("display").innerHTML = "CevH2";
}


//*plays audio on key trigger *//

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 81) {
    document.getElementById("Q").play();      document.getElementById("display").innerHTML = "Heater1";
  }
});

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 87) {
    document.getElementById("W").play();    document.getElementById("display").innerHTML = "Heater2"; 
  }
});

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 69) {
    document.getElementById("E").play();    document.getElementById("display").innerHTML = "Heater3";
  }
});

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 65) {
    document.getElementById("A").play();    document.getElementById("display").innerHTML = "Heater4";
  }
});

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 83) {
    document.getElementById("S").play();    document.getElementById("display").innerHTML = "Heater6";
  }
});

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 68) {
    document.getElementById("D").play();    document.getElementById("display").innerHTML = "DcsOh";
  }
});

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 90) {
    document.getElementById("Z").play();    document.getElementById("display").innerHTML = "KicknHat";
  }
});

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 88) {
    document.getElementById("X").play();    document.getElementById("display").innerHTML = "Kick1";
  }
});

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 67) {
    document.getElementById("C").play();   document.getElementById("display").innerHTML = "CevH2";
  }
});

</script>

I’m a bit of a newbie, but I think this is a case of adding an @media query tailored to the screen size ? I dont see any media queries in your css

Cool project btw

hey anthony,
Thank you. I’m a newbie too. I’ve been learning for about 6 months. There is so much to learn and remember. I completely forgot about media querys and havn’t used them so far in my code so thank you for the reminder.

1 Like

I tried it out, seems like the letters are overlapping (on all screen sizes) ?

Does it? I’m creating a webpage on google sites and it only shows me theres a problem in the phone screen sizes. I was using em and rem font-size measurements and apparently thats a problem when it comes to responsive resizing. I found a font measurement of vw instead of pixels/em/rem and that seems to work

nope i lied that isn’t fully working for the smaller screen and the buttons don’t stay inline-blocks of 3 they occupy a row each ? the font size is resposive but not the actual buttons

Well when I first opened it with VS code I thought it was just 3 buttons, but on further inspection it looks like the buttons below or above are shifting over each other…

Thats weird. It didnt show up like that on my screen. What screen size do you have?
I’ve edited the CSS slightly and its working fine on mine. Would you mind checking my code again on your screen just to make sure?

<style>

#drum-machine {
  background-color: #00FE44;        
  width: 70%; /* % of the parent container or screen if no parent*/  
  border: 10px solid black;
  border-radius: 30px;
  margin: auto auto;
  max-width: 700px;
}

#drumpads {
 width: 100%; 
 padding-top: 50px;
 padding-bottom: 10px;
 margin: auto auto;
}

.drum-pad {       
  border-width: 3px;
  border-radius: 10px;  
  font-size: 6.5vw;
  font-family: Stencil;
  min-width: 2.5em;
  max-height: 4em;
}

.drum-pad:hover {
  cursor: pointer;
}

#display {
  background-color: red;
  width: 40%;
  font-size: 1.5em;  
  margin: auto auto;
  margin-top: 0.5em;     
}

#display-div {
  padding-top: 30px; 
  width: 100%;
}

.center {
  text-align: center;
}

#instructions {
  margin: auto auto;
  width: 80%;
  text-align: center;
  font-size: 2.5vw;
  background-color: black;
  color: white;
  padding: 5px 5px 5px 5px;
  font-family: verdana;
  width: 70%;  
}

.display-inline {
  display: inline-block;
}

#title-header1 {
 font-family: Rubik;
 width: 70%;
 text-align: left;
 margin: auto auto;
 font-size: 6vw;
}

#title-header2 {
 font-family: Rubik;
 width: 70%;
 text-align: left;
 margin: auto auto;
 font-size: 10vw; 
}

</style>


<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
  <title>Drum pad Machine</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@800&display=swap" rel="stylesheet">
</head>


<section>
  
 <div id="title-header1">DRUM-PAD</div>
 <div id="title-header2">MACHINE</div>        

 <div id="instructions">
  <p>Hit the corresponding letter on your keyboard or click on a drum-pad letter below to activate a sound provided by the Free Code Camp organisation. The name of the sound will also be displayed!</p>
 </div>
 <br>
  
 <div type="container" id="drum-machine"> 
     
  <div id="display-div" class="center">
    <p id="display">DRUM PAD</p>
  </div>
       
  <div id="drumpads" class="center">

    <div id="first3buttons" class="display-inline"> 
     
      <button onclick="playQ()" id="Heater1" class="drum-pad">Q
        <audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" class="clip" id="Q"></audio>
      </button>
    
      <button onclick="playW()" id="Heater2" class="drum-pad">W
        <audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3" class="clip" id="W"></audio>
      </button>
    
      <button onclick="playE()" id="Heater3" class="drum-pad">E
        <audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3" class="clip" id="E"></audio>
      </button>
     </div>
     <br></br>
    
     <div id="second3buttons" class="display-inline">
      <button  onclick="playA()" id="Heater4" class="drum-pad">A
        <audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3" class="clip" id="A"></audio>
      </button>
    
      <button onclick="playS()" id="Heater6" class="drum-pad">S
        <audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3" class="clip" id="S"></audio>
      </button>
    
      <button  onclick="playD()" id="DscOh" class="drum-pad">D
        <audio src="https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3" class="clip" id="D"></audio>       
      </button>
   </div>
   <br></br>

   <div id="thrid3buttons" class="display-inline">    
      <button onclick="playZ()" id="KicknHat" class="drum-pad">Z
        <audio src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3" class="clip" id="Z"></audio>
      </button>
    
      <button onclick="playX()" id="Kick1" class="drum-pad">X
        <audio src="https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3" class="clip" id="X"></audio>
      </button>
    
      <button onclick="playC()" id="CevH2" class="drum-pad">C
        <audio src="https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3" class="clip" id="C"></audio>
      </button> 
     </div>  
    </div>
   </div>    
</section>

<script>

//* plays audio on mouse press //*

function playQ() {
 document.getElementById("Q").play();
 document.getElementById("display").innerHTML = "Heater1";
}

function playW() { 
 document.getElementById("W").play();
 document.getElementById("display").innerHTML = "Heater2";                 
}

function playE() { 
 document.getElementById("E").play();  
 document.getElementById("display").innerHTML = "Heater3";
}

function playA() {
 document.getElementById("A").play();  
 document.getElementById("display").innerHTML = "Heater4";
}

function playS() { 
 document.getElementById("S").play();
 document.getElementById("display").innerHTML = "Heater6";
}

function playD() {
 document.getElementById("D").play();
 document.getElementById("display").innerHTML = "DcsOh";
}

function playZ() {
 document.getElementById("Z").play();
 document.getElementById("display").innerHTML = "KicknHat";
}

function playX() { 
 document.getElementById("X").play();
 document.getElementById("display").innerHTML = "Kick1";                  
}

function playC() {
 document.getElementById("C").play();
 document.getElementById("display").innerHTML = "CevH2";
}


//*plays audio on key trigger *//

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 81) {
    document.getElementById("Q").play();      
    document.getElementById("display").innerHTML = "Heater1";
  }
});

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 87) {
    document.getElementById("W").play();    
    document.getElementById("display").innerHTML = "Heater2"; 
  }
});

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 69) {
    document.getElementById("E").play();    
    document.getElementById("display").innerHTML = "Heater3";
  }
});

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 65) {
    document.getElementById("A").play();    
    document.getElementById("display").innerHTML = "Heater4";
  }
});

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 83) {
    document.getElementById("S").play();    
    document.getElementById("display").innerHTML = "Heater6";
  }
});

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 68) {
    document.getElementById("D").play();    
    document.getElementById("display").innerHTML = "DcsOh";
  }
});

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 90) {
    document.getElementById("Z").play();    
    document.getElementById("display").innerHTML = "KicknHat";
  }
});

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 88) {
    document.getElementById("X").play();    
    document.getElementById("display").innerHTML = "Kick1";
  }
});

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 67) {
    document.getElementById("C").play();   
    document.getElementById("display").innerHTML = "CevH2";
  }
});

</script>

It’s definitely better, but I see there’s a wrapping issue now. When screen width increases

okay good. thank you. Whats the wrapping issue? Are you talking about the text and title not being the same width as the drum machine?

Try this out, I’ve changed your inline class to no wrap BUT that was not the fix, I actually think the individual buttons were scaling too much when changing screen size, so I turned the drum-pad class height and width in terms of VW and VH (instead of EM or REM as you had it?) , also added some responsive padding to keep them nicely spaced. Take a look

#drum-machine { background-color: #00FE44; width: 80%; /* % of the parent container or screen if no parent*/ border: 10px solid black; border-radius: 30px; margin: auto auto; max-width: 700px; } #drumpads { width: 100%; padding-top: 50px; padding-bottom: 10px; margin: auto auto; } .drum-pad { border-width: 3px; border-radius: 10px; font-size: 6.5vw; font-family: Stencil; max-width: 40vw; max-height: 15vh; padding: 0 2.5vw 0 2.5vw; } .drum-pad:hover { cursor: pointer; } #display { background-color: red; width: 40%; font-size: 1.5em; margin: auto auto; margin-top: 0.5em; } #display-div { padding-top: 30px; width: 100%; } .center { text-align: center; } #instructions { margin: auto auto; width: 80%; text-align: center; font-size: 2.5vw; background-color: black; color: white; padding: 5px 5px 5px 5px; font-family: verdana; width: 70%; } .display-inline { display: inline-block; flex-wrap: nowrap; } #title-header1 { font-family: Rubik; width: 70%; text-align: left; margin: auto auto; font-size: 6vw; } #title-header2 { font-family: Rubik; width: 70%; text-align: left; margin: auto auto; font-size: 10vw; } Drum pad Machine
DRUM-PAD
MACHINE

Hit the corresponding letter on your keyboard or click on a drum-pad letter below to activate a sound provided by the Free Code Camp organisation. The name of the sound will also be displayed!


<div id="display-div" class="center">
  <p id="display">DRUM PAD</p>
</div>
     
<div id="drumpads" class="center">

  <div id="first3buttons" class="display-inline"> 
   
    <button onclick="playQ()" id="Heater1" class="drum-pad">Q
      <audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" class="clip" id="Q"></audio>
    </button>
  
    <button onclick="playW()" id="Heater2" class="drum-pad">W
      <audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3" class="clip" id="W"></audio>
    </button>
  
    <button onclick="playE()" id="Heater3" class="drum-pad">E
      <audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3" class="clip" id="E"></audio>
    </button>
   </div>
   <br></br>
  
   <div id="second3buttons" class="display-inline">
    <button  onclick="playA()" id="Heater4" class="drum-pad">A
      <audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3" class="clip" id="A"></audio>
    </button>
  
    <button onclick="playS()" id="Heater6" class="drum-pad">S
      <audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3" class="clip" id="S"></audio>
    </button>
  
    <button  onclick="playD()" id="DscOh" class="drum-pad">D
      <audio src="https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3" class="clip" id="D"></audio>       
    </button>
 </div>
 <br></br>

 <div id="thrid3buttons" class="display-inline">    
    <button onclick="playZ()" id="KicknHat" class="drum-pad">Z
      <audio src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3" class="clip" id="Z"></audio>
    </button>
  
    <button onclick="playX()" id="Kick1" class="drum-pad">X
      <audio src="https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3" class="clip" id="X"></audio>
    </button>
  
    <button onclick="playC()" id="CevH2" class="drum-pad">C
      <audio src="https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3" class="clip" id="C"></audio>
    </button> 
   </div>  
  </div>
 </div>    

Okay thanks. I’ve added some max-widths so they don’t scale too big

Here’s what was happening before I changed the drum pads class

.drum-pad {
border-width: 3px;
border-radius: 10px;
font-size: 6.5vw;
font-family: Stencil;
max-width: 40vw;
max-height: 15vh;
padding: 0 2.5vw 0 2.5vw;
}

Here’s my changes, not sure how they work on other screens. I mainly use vh and vw tbh

okay. Annoyingly I can’t see any of that in the editor i’m using. I think i have a couple of issues when it comes to viewing the screen size. My screen isn’t the biggest and Googlesites only displays 3 fixed viewing sizes

Do you know of any screen size viewers that are any good to download so I could test more screen sizes?

Just use VS code, its fantastic.

Well what I usually do is run it from my code editor and just change the screen size on your display? (Not very good advice though because I have a couple projects that are terrible on phone screens :frowning: )

VS code has a live-server extension that allows you to open the code in the browser, then you simply resize your browser page to see how the website visually adjusts

I have tried this but the display size doesnt reduce to phone size.