Technical Documentation Page #4

Just completed this project.
All feedbacks are welcome,

Thank you!

[https://codepen.io/shaniakond/full/ExgRJZe]

Your page looks good @ShaniaKond. Something to revisit;

  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens

The user story says;
On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left side of the screen and should always be visible to the user.
So on smaller devices you can move the navbar to the top. Where would be a good breakpoint for this?
As a hint, start with the narrow view (mobile) design first and then work your way wider, adding breakpoints where needed for the wider design.

1 Like

So I wanted make it responsive and now by doing so, I totally crashed it. The nav-links aren’t working. Please can you check to see what I did wrong?

Sorry @ShaniaKond but I’m just now seeing this.

I’m not seeing where it crashes but I do see it’s not working. I’ll give you a couple of things to look at;

  1. in the #navbar selector for now just add the following two lines (these are the only two lines it should contain)
position: top;
width: 100%;

try resizing your browser and see what happens. The navbar does not move.
2. Now, move your media query to the bottom of your stylesheet and try resizing the browser again. The navbar moves to the top.

Remember what the C in CSS stands for.
I think with this bit of help you should be able to move forward with making your page responsive.

Hope that helps.

1 Like

I think I understand what you’re saying so I’m gonna give it a try.

Thanks!

Ask me if you have any questions.

Be sure to either mention me by name (@Roma) or click the reply button in my post so I’ll get notified.
If you use the reply button at the bottom of the page I don’t get notified and will only see it if I stumble across it.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.