Responsive Design Issues on Mobile Devices

[YadavAkhileshh]

Current Behavior

The OpenCRE website has several responsive design issues that negatively impact the mobile user experience:

1. Navbar Logo Overflow: The logo has a fixed size of 10rem x 10rem with a left margin of 4rem, causing horizontal overflow on mobile devices (especially on screens < 375px width).

2. Chatbot Message Cards Too Wide: Message cards have max-width: 65% which is too wide on small mobile screens, leaving insufficient margin and making messages appear cramped.

3. Search Bar Fixed Width: The desktop search bar has a fixed width of 16rem which doesn't adapt well to different screen sizes.

4. Hero Section Logo Issues: The hero section logo has margin-right: 5rem which causes layout issues on mobile devices.

5. Missing Mobile-Specific Padding: Several sections lack proper mobile padding adjustments, causing content to touch screen edges.

Expected Behavior

The website should be fully responsive across all device sizes:

• Content should never overflow horizontally
• Proper spacing and padding on all screen sizes
• Touch-friendly interactive elements
• Readable text sizes on mobile
• Optimized layouts for different breakpoints

[YadavAkhileshh]

Can i work on this ?