Responsiveness: Issues When Browser is Resized

Design help General
1

HELP!

I’ve been having just a string of issues with responsiveness. When the browser is resized, the content seems to hang to the left. What I’d like is that the content resized proportionately in the center as the browser is widened or shrunk. Instead I’m getting this:

Example A: Home Page:

The text at the top (NO EARBUDS!) ideally would be centered on the page and, as the top nav bar moves proportionately, it should also center proportionately with the browser size. It seems to in size be proportionate but not in the center.

Example B: Playlist + other Content Pages:

The only part of the page that is responsive (again) seems to be the nav bar. The rest of the page does not move as the browser widens and I’d hope that instead the elements center with the extra space added on the left/right or IDEALLY proportionally resizes.

Need some desperate help with responsive design. On the home page, the video + nav bar seem to behave closest to what I’d hope. Please respond with suggestions!!

Here is my site Read-Only:

https://preview.webflow.com/preview/noearbuds?utm_source=noearbuds&preview=994729bb5b453b06c27c090f1d6a52b2

Feel free to dive into the code, I can’t for the life of me figure out why this is happening but I hope you can!

2

To be able to create responsive design you need to understand what does it mean and how does it work. Your design is not responsive simply because you used pixels as units for everything. Since pixels are not relative but absolute units you cannot make them behave responsibly - to shrink or to grow with the browser window. If you were to use percents for your elements’ sizes you would’ve seen everything scale nicely or, as you have put it, proportionately.

For example video on the main page behaves the way you want because its width is set in percents. You will need to recreate everything from scratch using only relative units, using flexbox as your structure, and not using “visible on” property on everything (seriously, check the tablet and mobile landscape layouts - they are empty).

Good luck