Attempt to make it responsive

[anubhakushwaha]

Checklist

• My branch is up-to-date with the upstream pre-dev branch.
• 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 d709b62 on anubhakushwaha:makeResponsive into ea6096f 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.

[jarifibrahim]

Awesome work @anubhakushwaha . Thanks for the PR :)

[tapaswenipathak]

..and knew the magic of using % or em instead of specifying px. Great you picked % over em. 👍 I checked off one todo from here too. 🎉

You might want to try it on bigger screens too, the odd child's triangle will move away/extra padding from the rectangle. Let me know if you have questions for this or I'll take care of this before merging.

[tapaswenipathak]

^ 🐼 😄

[anubhakushwaha]

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

[coveralls]

Coverage remained the same at 72.269% when pulling 16458ca on anubhakushwaha:makeResponsive into 3741eed 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 🍂

[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

[tapaswenipathak]

🎉