Responsive to screen size

The responsiveness looks pretty good to me except when I widen my browser really wide.

#drum-machine {
  background-color: #00FE44;
  width: 70%;
  border: 10px solid black;
  border-radius: 30px;
  margin: auto auto;
  max-width: 700px;
}

Is there a reason for setting the max-width here? If I remove that then the responsiveness is good even at very wide widths.

Ahh okay no obviuosly not. thank you

The important thing is that you understand why that was causing a problem. Do you know why that was causing a problem?

I think so… if there is a max-width the object cant expand with screen width but the rest of the project is still responsively resizing causing overlaps?

Exactly. And the reason the buttons are expanding is because you are using vw for the font size, so they will keep growing as you widen the browser. Thus, the buttons were eventually growing too big for the max-width you had set.

At first I was using em and rem to resize which was working upto a certain point but have switched to vw and percentages instead to scale according to the screen width

Could someone check this code out and help me understand why it doesn’t work in my browser but is fine in codepen. There is no babel in the background and is pure jquery and javascript. I’ve tried adding several different links of the jquery but still no luck

<!DOCTYPE html>
  
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
  <title>Ball rolling</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <link rel="stylesheet" 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">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</head>

<style>
#welcome-div {  
  width: 40%;
  background-color: red; 
}

#welcome { 
  font-family: Rubik;
  text-align: left;
  margin: auto auto;
  font-size: 6vw;
}

#gettheballrollingtext {
  font-family: Rubik;
  text-align: left;
  margin: auto auto;
  font-size: 4vw;
}

#ballrollingtext-div {
  width: 60%;
  background-color: yellow;
}

#ballpath-div {
  min-height: 40px;
  background-color: green;
  width: 70%;
}

#ball-outer {
  position: relative;
  background-color: black;
  border: 2px solid black;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  float: left;  
	transition: 2.5s linear;
}

#ball-inner {
  position: absolute;
  background-color: blue;
  border: 2px solid blue;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  margin: 3px;
}

#ball-button {
  border: 2px solid black;
  border-radius: 2px;
  font-family: verdana;
}

#ball-button:hover {
  cursor: pointer;
}
</style>

<script>
  let startingAngle = 0;

$("#ball-button").on('click', function() {
	startingAngle += 750;

	$("#ball-outer").css({ transform: "rotate(+" + startingAngle + "deg" });
	$("#ball-inner").css({ transform: "rotate(-" + startingAngle + "deg" });
  $('#ball-outer').animate ({ 'marginLeft' : "+=650px" });
});
</script>

<html>
  <div id="welcome-div">
      <header id="welcome">WELCOME</header> 
  </div>
  
  <div id="ballrollingtext-div">
    <header id="gettheballrollingtext">Let's get the ball rolling!</header>    
  </div>
<br></br>
  <button id="ball-button">PRESS</button>
<br></br>
  <div id="ballpath-div">
    <div id="ball-outer">
      <div id="ball-inner"></div>
    </div>
  </div>
</html>

I understand why you switched to vw for font sizes but I will tell you that this isn’t accessible and in a real world app you shouldn’t do that. You can use vw mixed with other units, such as rem, but using vw by itself for font sizes makes it impossible for people to manually increase the text size if they need to.

Always check the browser console for errors when something isn’t working the way you think it should. In this case you should see something like:

“Uncaught ReferenceError: $ is not defined”

This is telling you that jQuery isn’t loading. I will give you a hint. You don’t use a link element to load JS libraries.

A hint haha… thanks. i don’t know any other way. @import into the ?

To the googles! jQuery CDN.

I would use jQuery 3.x minified or slim minified. Just click on one of those links and it will show you what to put in your HTML to use jQuery.

okay thank you. I’m using https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
which i’m running in codepen but i still can’t get it to work in googlesites.
Where is it supposed to go?.. In the script tags which contain the javascript after the html with an src attribute? Because thats where it is but still isnt working

I’ve loaded it behind the scenes in codepen which is completely different to the website i’m working on

You’ll need to paste your HTML in here so we can see what you did. To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.

The link I gave you for the jQuery CDN should have given you the exact script element to use to load jQuery. Did you copy/paste it into your HTML?

I have :

<head></head>
<style></style>
<body></body>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
  //* all the javascript and jquery is in here
</script>

You don’t want to put your actual JS inside of the script tags that load jQuery. Those go in a separate script element if you want to continue adding the JS in your HTML document.

Also, you need to make sure your HTML is loaded before you load your jQuery since you are using $("#ball-button"). If that element hasn’t been loaded yet then your jQuery won’t work. One option would be to move the script element with your JS to the very end of your HTML document, just before the closing </html> tag.

okay I’ll try this. thank you that’s very helpful

that fixed everything to work… thanks

I’m having a couple of issues with his new project. The initial jquery animations on page load don’t work which is strange as the rest of the jquery is fine. I’ve tried many options but still nothing

ball rolling (codepen.io)