Make openafrica more mobile responsive.

[andela-onnenanya]

Currently:

On mobile, most of the pages are not responsive. In some cases, particularly the sidebar, there are overflowing texts. One most serious case is the /dataset page where the datasets are displayed as static white boxes.

Desired Behaviour:

The pages should be responsive with regards to the modern mobile devices.
No text overflows.
No missing or unintentionally hidden components.

Dev Notes:

Prefer vertical scrollability to horizontal scrollability: What this means is that pages should horizontally fitted to the device screen and vertically scrollable.

Screenshots:

This is /dataset page; static white boxes displayed

This is user profile page

This is /datarequest page; the sidebar

How to replicate the behavior:

Just open https://africaopendata.org on your mobile device and navigate to different pages.

Suggestions:

This issue may have to be broken into smaller tasks, to cover all areas affected.

[DavidLemayian]

This is a good idea. Looking forward to the PR.