Technical Documentation Page tests - User Story 14

Hello everyone.

I’m working on the FCC Technical Documentation Page project and I have a question regarding the user story #14, which 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.”

What size is “regular sized”? Do I just tell the media query to check if the screen orientation is landscape and call it a day? Any help would be appreciated.

Common breakpoints for widths of devices:

  • 320px — 480px: Mobile devices
  • 481px — 768px: iPads, Tablets
  • 769px — 1024px: Small screens, laptops
  • 1025px — 1200px: Desktops, large screens
  • 1201px and more — Extra large screens, TV

This user story is just telling you that you need to have the nav menu on the left side of the page when the view port is wide enough to allow it.

When you have a narrow view port then the nav menu should not be on the left side of the page because there is not enough horizontal room for both the menu and the content. So for narrow views the nav menu would be at the very top of the page above the content. Then at some point, as you widen the browser the nav menu must shift to the left side of the page. You would use a CSS media query break point to make this shift.

I don’t think there is a specific width you need to shoot for here. Just make sure your menu shifts from top to left at some reasonable point.