Skip to content

[BUG] Header Not Responsive on Small Screens (Layout Breaks on 320px Width) #99

Description

@zaibamachhaliya

Description:
The header of the website is not responsive on smaller screen sizes (320px and above). When the screen width is reduced, the header content overflows outside the viewport and the layout breaks. This causes horizontal scrolling and also affects the overall website layout, making other sections misaligned or visually broken.

The navigation items and header elements do not adjust properly for mobile screens, which results in a poor user experience on smaller devices. The layout needs to be fixed so that it properly adapts to different screen sizes without breaking.

Expected Behavior:
The header should be fully responsive and adapt properly to all screen sizes, especially mobile devices (320px and above). It should not overflow or break the layout, and the navigation should be properly aligned or converted into a mobile-friendly menu.

Actual Behavior:
The header overflows on small screens, causes horizontal scrolling, and breaks the overall page layout.

Impact:
This issue affects mobile users and makes the website look broken and unprofessional on small devices.

Metadata

Metadata

Labels

MediumSSoC26TO CONTRIBUTEbugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions