Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task
Mariam-Senzia opened this issue Oct 2, 2024 · 1 comment · May be fixed by #541
Open
1 task
Labels
💻 aspect: code Concerns the software code in the repository 🛠 goal: fix Bug fix 🟧 priority: high Stalls work on the project or its dependents 🏁 status: ready for work Ready for work

Comments

@Mariam-Senzia
Copy link

Mariam-Senzia commented Oct 2, 2024

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

Screenshot from 2024-10-02 12-28-39

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.
@Mariam-Senzia Mariam-Senzia added 💻 aspect: code Concerns the software code in the repository 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work 🛠 goal: fix Bug fix 🟧 priority: high Stalls work on the project or its dependents labels Oct 2, 2024
@possumbilities possumbilities added 🏁 status: ready for work Ready for work and removed 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work labels Oct 2, 2024
@ObuliAbraham
Copy link

assign me for this issue

ObuliAbraham added a commit to ObuliAbraham/chooser-abraham that referenced this issue Oct 3, 2024
This CSS snippet addresses mobile responsiveness for screens up to 768px wide, with special attention to devices just above 375px. It reorganizes the footer into a single-column layout on smaller screens, stacking elements vertically with adequate spacing. The subscribe form and donate button are adjusted for full-width display, improving touch interaction. For slightly larger mobile devices (376px to 768px), the code implements a two-column grid for the footer menu and sets a maximum width for the main container, preventing content from stretching too wide. These changes aim to create a more user-friendly layout on various mobile devices, ensuring better alignment and readability of content. The adjustments include careful padding, margin, and width modifications to maintain visual consistency across different screen sizes while optimizing the use of available space.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💻 aspect: code Concerns the software code in the repository 🛠 goal: fix Bug fix 🟧 priority: high Stalls work on the project or its dependents 🏁 status: ready for work Ready for work
Projects
Status: Backlog
Development

Successfully merging a pull request may close this issue.

3 participants