Mobile hexagon hover, where the user long-presses a hexagon and swipes somewhere outside of the hexagon and lets go, was making the hover text really large at lower resolutions like phones. So I had to move the texts upwards at different resolutions, and change text size.

Proposed changes

Had responsiveness for res width 800px or higher, but now hexagon hover is fully responsive from 300px - max width! Also fixed responsiveness for mobile view, so that works too now.

Types of changes

What types of changes does your code introduce to HackMerced Hub?
Put an x in the boxes that apply

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation Update (if none of the other choices apply)

Checklist

Put an x in the boxes that apply. You can also fill these out after creating the PR. If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.

• I have read the CONTRIBUTING doc
• Lint and unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)
• Any dependent changes have been merged and published in downstream modules

Responsiveness

Check off the different browsers and devices you have tested on. Note: testing includes Horizontal and Vertical alignments

Browsers

• Chrome
• Firefox
• Edge
• Safari
• Brave
• Opera

Devices

Phones

• Moto G4
• Galaxy S5
• Pixel 2
• Pixel 2 XL
• iPhone 5/SE
• iPhone 6/7/8
• iPhone 6/7/8 Plus
• iPhone X

Tablets

• iPad
• iPad Pro

Desktops

• Windows 10
• MacOSX
• Ubuntu

Screenshots

Desktop view:

Mobile view:

Further comments

N/A