Website is Not Responsive Across Different Devices and Screen Sizes

[tejas-130704]

Issue Description

The website is not responsive, causing poor user experience on various devices and screen sizes.

Steps to Reproduce

1. Open the website on a desktop browser.
2. Resize the browser window to various sizes (e.g., smartphone, tablet, and smaller desktop widths).
3. Open the website on different devices (e.g., smartphone, tablet).
4. Check the layout and functionality of the site across these different sizes and devices.

Expected Behavior

• The website should adjust its layout and elements to fit the screen size and resolution of the device.
• All functionality should be accessible and usable on all devices and screen sizes.
• Text should be readable without requiring zoom.
• Navigation should be easy to use on all devices.

Actual Behavior

• The layout does not adjust correctly on smaller screens.
• Some elements are not displayed or are cut off.
• Text is too small to read without zooming in.
• Navigation is difficult to use on smaller devices.
• Some functionality is broken or not accessible on mobile devices.

Screenshots

GSSOC24

[ishap11]

Hello, this is Isha Prajapati, I hope you're doing well. I'm eager to contribute to the ShopNex project by implementing a responsiveness across various devices. I believe this addition will greatly enhance user interaction . Kindly consider assigning me this task under GSSoc'24. Thank you!