Make the site responsive

[adamg703]

Fixes #1381 (<=== Replace 0000 with the Issue Number)

Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!

• tests pass -- look for a green checkbox ✔️ a few minutes after opening your PR -- or run tests locally with npm test
• code is in uniquely-named feature branch and has no merge conflicts
• PR is descriptively titled
• ask @publiclab/is-reviewers for help, in a comment below
• Insert-step functionality is working correct as expected.

We're happy to help you get this ready -- don't be afraid to ask for help, and don't be discouraged if your tests fail at first!

If tests do fail, click on the red X to learn why by reading the logs.

Please be sure you've reviewed our contribution guidelines at https://publiclab.org/contributing-to-public-lab-software
Please make sure to get at least two reviews before asking for merging the PR as that would make the PR more reliable on our part
Thanks!

[welcome]

Thanks for opening this pull request!
There may be some errors, but don't worry! We're here to help! 👍🎉😄

[codecov]

Codecov Report

Merging #1382 into main will increase coverage by 10.31%.
The diff coverage is 64.01%.

@@             Coverage Diff             @@
##             main    #1382       +/-   ##
===========================================
+ Coverage   55.11%   65.43%   +10.31%     
===========================================
  Files         117      133       +16     
  Lines        2344     2743      +399     
  Branches      360      438       +78     
===========================================
+ Hits         1292     1795      +503     
+ Misses       1052      948      -104     

Impacted Files	Coverage Δ
examples/lib/scopeQuery.js	18.51% <ø> (ø)
src/Modules.js	100.00% <ø> (ø)
src/modules/WebglDistort/Module.js	2.29% <0.00%> (ø)
src/ui/SetInputStep.js	12.90% <0.00%> (-1.39%)	⬇️
src/modules/ColorHalftone/Module.js	3.63% <3.63%> (ø)
examples/lib/defaultHtmlStepUi.js	11.35% <4.08%> (-0.85%)	⬇️
examples/lib/intermediateHtmlStepUi.js	11.11% <5.55%> (+0.94%)	⬆️
examples/lib/insertPreview.js	13.15% <20.00%> (-0.36%)	⬇️
src/util/getImageDimensions.js	20.00% <20.00%> (ø)
src/util/isGif.js	20.00% <20.00%> (ø)
... and 102 more

[VladimirMikulic]

@adamg703 I can confirm that you did a great job making the website responsive.
However, I have a few suggestions. 📝

I've noticed that you've named the PR title "Worked on issue #1381".
It is really a bad naming convention since a reviewer doesn't know what exactly you tried to accomplish with the PR.

Your second mistake is closely related to the first one and that is committed messages.
In the first commit, your message is "Removed line 47 & 68, added line 154".
The reviewer doesn't know what is line 47 or 68, right?
Also, in the future line can change and it is no longer a valid commit message.
Commit messages purpose is to tell us what was changed and most importantly why it was changed.

The same applies to your second commit.

Finally, you should edit your PR message.
Fixes #1381 and mark checkboxes.

I know this was a lot for you first-time contribution(PR).
My purpose was not to discourage you, but quite the opposite, to make you a better programmer.
We all make mistakes and that is alright, but the mistake is not a mistake if you've learned something from it 😄
You'll make your life and the life of your colleagues easier when you look back at this a few months later.

[VladimirMikulic]

Also, don't work on the main branch!
You should always create a new branch when you want to introduce a change.

Close this PR and open another one with the suggested improvements.
The maintainers won't merge this.

[harshkhandeparkar]

LGTM but please change the PR title.

[gitpod-io]

[harshkhandeparkar]

@jywarren this one is ready too.

[jywarren]

I agree, approved! Once it passes, let's merge it!

[welcome]

Congrats on merging your first pull request! 🙌🎉⚡️
Your code will be published to https://beta.sequencer.publiclab.org in a day or two. Please test out your work on this testing server and report back with a comment that all has gone well!
In the meantime, can you tell us your Twitter handle so we can thank you properly also do join our weekly check-in to share your this week goal and the awesome work you did 😃.
Please find the link pinned in the issue section
Now that you've completed this, you can help someone else take their first step! Try looking at this list of first-timers-only issues, and see if someone else is waiting for feedback, or even stuck! 😕
People often get stuck at the same steps, so you might be able to help someone get unstuck, or help lead them to some documentation that'd help. Reach out and be encouraging and friendly! 😄 🎉
See: Public Lab's coding community!

[jywarren]

Nice! Thank you so much!