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.

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

MAKING THE WEBSITE FULL RESPONSIVE (HEADER FOOTER AND SOME SECTIONS OF THE BODY) #238

Open
dnyanesh99borse opened this issue Oct 20, 2024 · 1 comment · May be fixed by #442
Open

MAKING THE WEBSITE FULL RESPONSIVE (HEADER FOOTER AND SOME SECTIONS OF THE BODY) #238

dnyanesh99borse opened this issue Oct 20, 2024 · 1 comment · May be fixed by #442
Assignees
Labels
jwoc under JWoC program medium medium level for jwoc

Comments

@dnyanesh99borse
Copy link
Contributor

dnyanesh99borse commented Oct 20, 2024

### Is your feature request related to a problem? Please describe.
The website currently lacks full responsiveness across different devices. Users experience issues when navigating on smaller screens such as smartphones or tablets, where the layout breaks, text overlaps, and certain elements (like the header and footer) are not properly aligned or scaled. This can frustrate users, leading to poor user experience and higher bounce rates, especially for mobile users.

Describe the solution you'd like

I would like the website to be fully responsive, ensuring that the header, footer, and body sections adjust seamlessly across all screen sizes. Specifically:

Header: The logo, navigation menu, and any icons should resize proportionally, with a collapsible menu (hamburger icon) for smaller screens.
Footer: The footer layout should stack appropriately on smaller screens, with icons and text resizing to remain readable.
Body Sections: Content, images, and interactive elements should adapt to different devices without losing readability or functionality. Media queries, flexible grids, and fluid typography should be used to ensure the website remains user-friendly on desktops, tablets, and mobile devices.
### Additional context
The design should prioritize mobile-first development, using tools like CSS Grid, Flexbox, and media queries for smooth scaling. Attached are some screenshots highlighting areas where responsiveness is currently an issue, such as overlapping elements in the header on mobile screens, and footer content that doesn’t align well. Responsive testing should be performed across various devices and browsers to ensure a consistent experience.

image

@Harshdev098 Harshdev098 added jwoc under JWoC program medium medium level for jwoc labels Feb 11, 2025
@thedgarg31
Copy link

Pls assign me this issue

@Harshdev098 Harshdev098 linked a pull request Feb 28, 2025 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
jwoc under JWoC program medium medium level for jwoc
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants