Skip to content

Mobile Responsiveness UI #734

@HardikMathur11

Description

@HardikMathur11

Description

The PictoPy documentation website currently has responsiveness issues on smaller screen sizes.
On mobile and narrow viewports, content overflows horizontally and important UI elements
are partially hidden, making the documentation difficult to read and navigate.

This PR improves the responsive layout to ensure the documentation renders correctly
across different screen sizes.


Current Behavior

  • Content overflows beyond the viewport width on mobile devices
  • Horizontal scrolling is required to view full content
  • Headings and text are partially cut off
  • Navigation and content alignment break on small screens
Image

Proposed Solution

  • Improve responsive styles for smaller viewports
  • Prevent horizontal overflow using proper container sizing
  • Ensure content adapts correctly to screen width
  • Adjust layout spacing and alignment for mobile devices


Testing

  • Tested on mobile viewport using browser dev tools
  • Verified no horizontal overflow
  • Confirmed layout works on desktop and tablet views
  • Ensured no functionality or navigation regressions

Impact

These changes significantly improve usability and accessibility of the documentation
for mobile users and enhance overall user experience.

I Want to work on it as a part of Unstoppable Hackathon please assign this issue to me

Metadata

Metadata

Labels

UIdocumentationImprovements or additions to documentation

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions