Fix: Navbar Overlaps Content at the Top of Main Page on a Mobile Device - Githubissues

Utkarshn10 / Focusly

Open source app to remain focused during your deep work sessions. Built using ReactJS

https://focusly.vercel.app/

MIT License

35 stars 44 forks source link

Fix: Navbar Overlaps Content at the Top of Main Page on a Mobile Device #135

Closed Koushik1311 closed 11 months ago

Koushik1311 commented 11 months ago

Related Issue

Closes: #112

Describe the changes you've made

By using useBreakpointValue from @chakra-ui/react set the base margin-top value to 105px and md to 0. Then used it on the Homepage and Lofi component to give some margin on mobile devices

Note: I'm using Prettier - Code formatter so it automatically formatted some of the codes.

Type of change

What sort of change have you made:

[x] Bug fix (non-breaking change which fixes an issue)
[ ] New feature (non-breaking change which adds functionality)
[x] Code style update (formatting, local variables)
[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
[ ] This change requires a documentation update

How Has This Been Tested?

I have tested it on my local machine.

Checklist:

[x] My code follows the guidelines of this project.
[x] I have performed a self-review of my own code.
[ ] I have commented my code, particularly wherever it was hard to understand.
[ ] I have made corresponding changes to the documentation.
[ ] My changes generate no new warnings.
[ ] I have added tests that prove my fix is effective or that my feature works.
[ ] Any dependent changes have been merged and published in downstream modules.

Screenshots

Original	Updated

Original	Updated

vercel[bot] commented 11 months ago

Someone is attempting to deploy a commit to a Personal Account owned by @Utkarshn10 on Vercel.

@Utkarshn10 first needs to authorize it.

Utkarshn10 commented 11 months ago

Thanks @Koushik1311 for contributing to Focusly :)