HackYourFuture-CPH / Guide-IT

Guide IT, a tool to help newcomers decide their IT path
MIT License
3 stars 1 forks source link

Frontend: Responsive Layout - Milestone 1 #117

Closed dpfernandes closed 3 years ago

dpfernandes commented 3 years ago

User story

Who: As a user What: I want to able to see the website on small desktop screens from 1024x768 to 1920x1080 Why: so that I can see the website the same way on my different desktop screens

Acceptance criteria

The website app should be responsive for a desktop screen from 1024x768 to 1920x1080. Do not create Mobile Responsiveness. The priority is to get the Pages on Milestone 1 responsive. We can check the other Milestones later.

If the resolution goes below 1024x768 we can make the menu into a burger menu.

Implementation details

Use percentage instead of pixels.

Use this example for inspiration for the Burger Menu - https://codesandbox.io/s/nmy6x9wrj

Use Developer Tools to check how the website reacts when it's being displayed on different resolutions/devices - Watch this video for inspiration https://www.youtube.com/watch?v=dkOj_GDtlwQ

Extra info

These are some of the rule of thumbs regarding screen resolutions

  1. Design for desktop displays from 1024×768 through 1920×1080
  2. Design for mobile displays from 360×640 through 414×896
  3. Design for tablet displays from 601×962 through 1280×800