Aaliyah Tribute Page + Testing Media Queries

Code Feedback
1

Hey ya’ll! Excited to be apart of this community and I just finished the first responsive web design project.

Here’s the link to the tribute page:

Question though, when I went into the css to start adding media queries to make the design responsive. It seemed that the elements were re-sizing on their own when I viewed on my iphone and when I resized the browser. Is this just because it’s inside the CodePen environment?

2 Likes
2

Hi @annalisacreative, welcome to the forum!
Congratulations for finishing your project! :clap::clap:
I like the minimalist style that you have used.

Some suggestions:

  • The HTML code has some errors. With this tool you can identify them.
  • The page generates a horizontal scroll that you can easily avoid.

I suggest you try to discover the cause of this scroll for yourself, but if you can’t, here I leave some hints:

The horizontal scroll is generated because #intro has width: 100% and padding: 20px.
Do you understand what the problem is? Understanding the cause of this problem is very important to solve it, and to avoid it in future projects.:muscle:

Possible solutions:

  • Set box-sizing: border-box for #intro (although I suggest you research on this property and consider applying it to all the elements of a page).
  • Or change width: 100% to max-width: 100%

Cheers and happy coding!:keyboard::muscle:

1 Like
3

Thanks Marta, I’ll be working on this project later today. I really appreciate your feedback :slight_smile: