Website Not Responsive on Mobile Devices

[Adithyakp86]

🐛 Bug Report: Website Not Responsive on Mobile Devices

Description

The website layout breaks on smaller screen sizes (mobile and tablet devices). Some elements overflow outside the viewport, resulting in horizontal scrolling and an inconsistent user experience.

Steps to Reproduce

1. Open the website in a browser.
2. Open Developer Tools and switch to mobile view.
3. Select a device such as iPhone SE or Galaxy S20.
4. Navigate through different pages of the website.
5. Observe the layout issues.

Expected Behavior

• The website should adapt properly to different screen sizes.
• No horizontal scrolling should be present.
• Images, text, and buttons should scale correctly.
• Navigation should remain usable on mobile devices.

Actual Behavior

• Content overflows the screen width.
• Some elements overlap each other.
• Horizontal scrollbar appears.
• Certain sections are difficult to interact with on mobile.

Possible Solution

• Add responsive CSS media queries.
• Use Flexbox/Grid layouts effectively.
• Set images to max-width: 100%.
• Test layouts across multiple screen sizes.

Acceptance Criteria

• Website is fully responsive on mobile devices.
• No horizontal scrolling occurs.
• Navigation works correctly on all screen sizes.
• Images and content scale appropriately.

Labels

bug frontend good first issue responsive-design