💡[FEATURE]:Improve and make the shopping carts & Navbar more responsive and occurring scroll behavior at x-axis

[sanjaraiy]

Is your feature request related to a problem? Please describe.
Improve and make the shopping carts & Navbar more responsive: Ensure that the shopping carts and Navbar adapt smoothly to various screen sizes. On larger devices, align elements appropriately, and on smaller screens, maintain text alignment without excessive growth in the y-axis. Additionally, eliminate any horizontal scrolling (scroll behavior on the x-axis) to ensure a clean and user-friendly interface.

Describe the solution you'd like

• To improve and make the shopping carts and Navbar more responsive while eliminating horizontal scrolling.
• Ensure the Navbar adapts to both large and small screens. Use Flexbox for layout, and add a hamburger menu for smaller screens.
• Arrange the shopping carts in a responsive grid layout to prevent overflow and horizontal scrolling.

Describe alternatives you've considered
Enhancement UI and improve shopping carts and navbar.

Additional context

[github-actions]

Congratulations, @sanjaraiy! 🎉 Thank you for creating your issue. Your contribution is greatly appreciated and we look forward to working with you to resolve the issue. Keep up the great work!

We will promptly review your changes and offer feedback. Keep up the excellent work! Kindly remember to check our contributing guidelines