Reactive Home Screen

[Code-Over-Time]

Category: Frontend Development

Level: Mid

Description

Currently the homepage of Varcade Games does not work very well on mobile. This task is all about modifying the login / register UI so that it does work on mobile.

As the screen size decreases the UI should scale accordingly.

Deliverable

• Updated Varcade Games client that renders correctly on mobile / tablet devices

Acceptance Criteria

• The login / register box is not cropped on small screens
• The login / register box dynamically changes to suit the smaller screen sizes

---

Task Tips!

• Browsers come with a built in tool for testing on smaller screens. For example in Firefox, if you open the developer tools you will see a button on the top right hand side of the UI beside the 'X'. The icon is of two mobile devices. Clicking this will allow you to simulate the screen resolution of different devices. Chrome has a similar tool

• You will need to use some CSS tricks for this one - look for media query, you will need it
• Use the developer tools! You can modify CSS directly in your browser and see what happens, then apply those changes to the project CSS files.