P5 Layout Questions

p5.js Libraries
6

Here’s an example (If you click play I apologize for the terrible choice of audio files, they’re just what I had lying around).

Basically all I did was add

	audioSlider.parent('audio-controls');

And remove

	// audioSlider.position(720, 655, 'relative');

I also commented the relative positioning of button:

button {
	background-color: white;
	color: #444444;
	padding: 8px;
	border: 1px solid #444444;
	border-radius: 8px;
	/*
	position: relative;
	left: -75px; */
}

Because this is generally not a great way to adjust positioning. If you want to create space between the button and slider you should use margin.

And lastly I set the z-index for bottom-toolbar and eliminated the background so that it would show above the canvas:

#bottom-toolbar {
	display: flex;
	align-items: center;
	height: 120px;
	padding: 10px;
	z-index: 1;
}