Responsive Design and Audio

Coding Help
,
1

Hi!

Running into a couple of simple problems with a project. Its meant to be a fun interactive portfolio. I’m not sure why, but this design is not mobile responsive. Am I doing something wrong? What should I change? Also running into a road block with the audio. Does anyone know why it isnt working?

this is the project: https://patricia.glitch.me

Thank you!!!

2

Hi @PatriciaMRobinson, welcome to the Glitch Forums!

I don’t know a lot about responsive css, so hopefully someone with more knowledge in that area will be able to help. If not we can see what we can come up with!

3

Hello @PatriciaMRobinson. Upon looking at your project, you seem to be using fixed and absolute positioning, which is not responsive CSS compatible. However, you might wish to start with all your divs at the same top and left starting point, say top:20px and left:20px, and implement document.onload and window.onresize handlers which compute and assign absolute positions based upon window.innerWidth and window.innerHeight. These handlers could be one and the same function.

Otherwise you could consider a CSS grid or Flexbox approach or use a relative size approach along with media queries.

I hope you find this helpful.

Cheers.

4

Thanks so much @cori and @SirFizX!!!

Still noticing issues. Particularly with mobile. Am I doing something wrong?

6

Hello @PatriciaMRobinson. I have adjusted a few things including:

  1. run your setup on first click/touch
  2. position your tone divs on load
  3. a few minor media query style changes
  4. touchmove handler for moving each tone div on mobile
  5. other minor stuff

Here is the adjusted remix.

Here is a screen capture of the current mobile performance.

1 Like