[Bug] Mobile Layout Issue: ‘Share Your Work’ Box Misalignment on Mobile Devices Above 375px

[Mariam-Senzia]

Description

On mobile devices with a screen width above 375px, the 'Share Your Work' box does not extend to the right edge of the screen. On smaller devices, the box spans the full width as expected.

Reproduction

1. Open the app on a mobile device with a screen width above 375px.
2. Navigate to the menu and click on 'Licenses and Tools'.
3. Observe the 'Share Your Work' box on the page.
4. See error where the box does not extend to the right edge of the screen.

Expectation

The 'Share Your Work' box should extend to the right edge of the screen on all mobile devices, including those with screen widths greater than 375px.

Screenshots

Environment

 - Device: Mobile simulator(iPhone 13)
 - OS: iOS 15
 - Browser: Chrome (version 117.0.5938.9 on laptop)

Resolution

• I would be interested in resolving this bug.

[ObuliAbraham]

assign me for this issue

[adizh]

could you please assign this issue to me?

[ShreyPurohit]

Proposal for Fixing the Responsiveness Issue on Mobile Devices

Description of the Issue

The 'Share Your Work' box on the 'Licenses and Tools' page does not extend to the right edge of the screen on mobile devices with a width greater than 375px. While it spans the full width on smaller devices, this inconsistency creates a poor user experience on larger mobile screens.

---

Proposed Solution

To resolve this issue, I propose implementing a mobile-first CSS approach to ensure consistent responsiveness across all screen sizes. Here’s how we can achieve this:

Steps to Fix the Issue

1. Analyze the Existing CSS Rules:

   • Identify any fixed-width, padding, or margin rules that might prevent the box from extending fully.
   • Check for container constraints, such as max-width or improper viewport usage.

2. Implement a Mobile-First CSS Approach:

   • Begin styling for smaller devices (e.g., 320px width) and progressively enhance the design for larger screens.
   • Use percentage-based widths (width: 100%) and relative units like em, rem, or vw instead of fixed pixel values.

3. Test Across Devices:

   • Test the responsiveness on devices with varying screen sizes (e.g., iPhone 13, iPhone SE) and orientations (portrait/landscape).
   • Validate in mobile simulators for different browsers (e.g., Chrome, Safari).

---

Benefits of Mobile-First CSS

• Improved Responsiveness: The box will adapt dynamically to any screen size, ensuring a seamless experience across all mobile devices.
• Future-Proof Design: Following a mobile-first approach ensures the design scales well for larger screens.
• Better Performance: By focusing on smaller devices first, we reduce unnecessary styling for devices with limited resources.
• Accessibility: Ensures a consistent and user-friendly experience, especially for touch-based navigation.

Request

I would love to work on resolving this issue by implementing a mobile-first CSS strategy, ensuring the 'Share Your Work' box spans the full width on all devices. Please assign this issue to me, and I’ll ensure the fix meets the project’s design and coding standards.

Thank you for considering my proposal!
@Mariam-Senzia @possumbilities