J Dilla Tribute Page - Feedback Please

Code Feedback
1

Hi everyone! Thanks for taking the time to check out my post. This is my first page I’ve built that I’m pretty proud of, but I’m running into some issues on it. When I run the tests, it all passes, but I don’t want to just give up, turn it in, and maybe get it to pass. It’d really bother me that it wasn’t right the first time.

So here it is: https://codepen.io/pleeseno/full/ebEdzX

I think it looks pretty good on a laptop. Things are fitted nicely and it flows well. (if you have any suggestions though, please comment)

The issue I have is on a mobile version. On my iPhone, it’s also lined up how I want it, but I have to drag over to actually see the content. It’s basically my laptop screen but on my phone =/

Help me please! Thank you!

1 Like
2

Not a bad page but as you already realized the problems starts when on mobile/tablet and thats because you have in css code like:

  margin-left: 30vw;
  margin-right: 30vw;

so you actually take away 60% of the viewport width to display nothing.

I would revise all that properties and lower them in media query.

Happy coding.

1 Like
3

Hey, thanks for replaying.
Ok, I understand what you mean. I originally had everything set to pixels, but when I went to mobile version it was even worse. I know that vw and % are more relative measurements, so I changed almost everything to that (and rem for font sizing). I think I’m just not grasping the sizing down. When I try to put in smaller vw sizes, it stays the same even though my media query is contingent to after a max of 800px is when it’ll become the original/desktop size.

Do you have any resources that I could look over that could help me with my problem? I don’t want the answer straight out, but I just am not figuring this out.

4

Also, on my mobile version, I have a lot of blank white space when I scroll down! What is that?

5

I don’t have that much time right now to go thru code, but, freakish beautiful, donuts!
Later on when you get to front end libraries projects and drum machine you could make mpc3000 interface drum machine and incorporate there.
Also you could add hover on cards, boost a bit of box shadow or something like that, and add transition to that and learn more button. It is pretty much one liner but feels better.
But yeah, a bit subjective coz of theme, but looking quite nice.

1 Like
6

Hahaha, thank you! Its for his last album and I thought it tied the page together well too. That’s a great idea about the MPC! I know the more I learn, the more I can enhance my page and I hope to use some for when I actually apply to jobs.
I’ll definitely try to add those suggestions. Real nice touches for the page to be more special.

When you get a chance, do you mind checking out my code? I’m gunna work on it still to try to fix it myself, but I would appreciate the help!