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 ?

[taditharun]

Hello,
I am a beginner contributor and interested in working on this issue.
I am currently exploring the project and would like to try fixing this.
Can you please guide me on where to start?
Thank you.

[rashmivemuri]

Hi, I have submitted a PR (#764) addressing the responsive design
issues listed in this ticket.

Changes include:

• Fixed navbar logo overflow on mobile
• Fixed chatbot message cards width responsiveness
• Fixed search bar fixed width
• Added mobile padding to CRE, Explorer, Standard and GapAnalysis pages
• Investigated hero section margin-right: 5rem — property not found
  in current codebase

Please review when you get a chance. Happy to make any changes
requested!