Attempt to make it responsive

[anubhakushwaha]

Checklist

• [x] My branch is up-to-date with the upstream pre-dev branch.
• [x] I have added necessary documentation (if appropriate).

Which issue does this PR fix?: fix partially #207

Brief description of what this PR does. Attempts to make the web page responsive, this can be achieved by setting the element sizes in percentages rather than pixels as mentioned in this post

If relevant, please include a screenshot. Different screen sizes

A picture of a cute animal (not mandatory but encouraged):

[anubhakushwaha]

@tapasweni-pathak @jarifibrahim I have attempted at making it responsive, please let me know if you know another way of doing it better. Please review.

[coveralls]

Coverage remained the same at 72.269% when pulling d709b62f12164c1d4982a9c85947c1bf163d6233 on anubhakushwaha:makeResponsive into ea6096f7e2c062fcddaef66f34fc43769fdc2cbd on OpenSourceHelpCommunity:predev.

[vaibhavsingh97]

@anubhakushwaha Can you deploy somewhere and give us the live demo link

[jarifibrahim]

@vaibhavsingh97 You could just run do a python manage.py collectstatic followed by python manage.py runserver. We don't have to deploy it just for reviewing.

[tapaswenipathak]

^ 🐼 😄

[anubhakushwaha]

@tapasweni-pathak Sure, will update you on this.

[coveralls]

Coverage remained the same at 72.269% when pulling 16458cabb14897399afb1d2c97a7f9fb013ab68a on anubhakushwaha:makeResponsive into 3741eedcbd8025cf979fb7c2569e8d69380307d8 on OpenSourceHelpCommunity:predev.

[anubhakushwaha]

@tapasweni-pathak I tested by zooming in the screen and it works well there as well as the right: and left: are relative to the rectangles. Let me know if I understood something wrong :fallen_leaf:

[tapaswenipathak]

👋 @anubhakushwaha, can you try with zooming out?

Edit: One extra 👀 I see this issue on my localhost but not with our live urls. 😕

[tapaswenipathak]

For some reason I only see it on different browsers in localhost and not on heroku on different browsers. Can someone please check it on how does it look on IE? Merging this, thanks for the work @anubhakushwaha 🎉.

[tapaswenipathak]

By the way you event made your commit message as an attempt [..], :D