Upcoming meetup page should be responsive

[zainab-ali]

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.