Upcoming meetup page should be responsive #22
Description
The upcoming meetup page isn't friendly to different screen layouts, including mobile. Taking an example
The right sidebar is partly hidden on desktop:
The content width is much larger than the screen width on mobile:
It should be made mobile friendly.
Potential Solution
The SASS stylesheets need to be adjusted to cater for responsive design. We already make use of CSS flexbox, grid and media queries, but there are probably fixed width styles interfering with them. The styles for the page can mostly be found in web/stylesheets/event.scss.
Tests
Unfortunately, we don't expect to test for different screen sizes any time soon. Manual testing is satisfactory.
Prerequisites
No experience is necessary. This issue probably won't involve any Scala — only CSS. You do need a mobile phone to test with.
What you'll learn
- The basics of responsive design
- How to use web developer tools to work on styles
- Styling CSS with SASS
- How to use flexbox, grid and media queries
- How to view a locally hosted page using a mobile
Getting started
Read our Contributor Guide to get set up.