Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix: Made Header and Footer Responsive, Converted Header to Hamburger Menu (#46) #49

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix: Made Header and Footer Responsive, Converted Header to Hamburger Menu (#46) #49

wants to merge 2 commits into from

Conversation

priyansh87
Copy link

Related Issue:

Problem

  • The header and footer were not responsive on smaller screens, causing layout issues and affecting the user experience on mobile devices.

What was done:

  • Made the header responsive and implemented a hamburger menu for mobile screens.
  • Made the footer responsive to ensure better layout on smaller screens.
  • Converted the current date in the footer from static text to dynamic display.

Additional Information:

  • The header now switches to a hamburger menu when the screen size is smaller than a certain width (tablet and mobile screen-width).
  • The footer dynamically displays the current date using JavaScript.

Screenshots of the responsive site:

image
image

@netlify Netlify
Copy link

netlify bot commented Dec 20, 2024 •
edited
Loading

✅ Deploy Preview for glistening-frangipane-580298 ready!

Name Link
🔨 Latest commit ef87138
🔍 Latest deploy log https://app.netlify.com/sites/glistening-frangipane-580298/deploys/676596464b79910008856807
😎 Deploy Preview https://deploy-preview-49--glistening-frangipane-580298.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@vidipsingh
Copy link
Contributor

Nice work! Just one small change:
In the Header section, when viewed on screens larger than tablets, the text and icons appear a bit too small. Could you make them slightly larger? Once that's done, your PR will be ready to merge.
Thanks!

Screenshot:

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Make Header, Footer, and Home Page Responsive
2 participants
@priyansh87 @vidipsingh