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.

Sign up for GitHub

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

Jump to bottom

[Bug] Improper Alignment of Blue Boxes in Mobile View in program-index.html #231

Open
1 task done
Raja-Abrar-Khan opened this issue Oct 15, 2024 · 4 comments · May be fixed by #236
Open
1 task done

[Bug] Improper Alignment of Blue Boxes in Mobile View in program-index.html #231

Raja-Abrar-Khan opened this issue Oct 15, 2024 · 4 comments · May be fixed by #236
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: ticket work required Needs more details before it can be worked on

Comments

@Raja-Abrar-Khan
Copy link
Contributor

Raja-Abrar-Khan commented Oct 15, 2024 •
edited
Loading

Description

In the mobile view, the blue content boxes ("Copyright" and "Better Internet") are not properly aligned and appear too large, disrupting the layout. This impacts readability and usability on smaller screens. This can be done by adjusting CSS .

Reproduction

  1. Open the webpage in a mobile view (e.g., using developer tools or a mobile device).
  2. Navigate to the section with the blue content boxes.
  3. Observe the misalignment and large size of the boxes.
  4. See error.

Expectation

The blue boxes should be properly aligned and scaled down to fit mobile screens, maintaining readability and a clean layout.

Screenshots

Screenshot 2024-10-16 005112
Screenshot 2024-10-16 005045

Environment

  • Device: (eg. iPhone Xs; laptop)
  • OS: (eg. iOS 13.5; Fedora 32)
  • Browser: (eg. Safari; Firefox)
  • Version: (eg. 13; 73)
  • Other info: (eg. display resolution, ease-of-access settings)

Additional context

There may be other layout issues on mobile, but addressing this particular issue at a time is will be better to avoid confusion.

Resolution

  • I would be interested in resolving this bug.
@Raja-Abrar-Khan Raja-Abrar-Khan 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 15, 2024
@vickova vickova linked a pull request Oct 16, 2024 that will close this issue
Open
7 tasks
@Raja-Abrar-Khan
Copy link
Contributor Author

@possumbilities can you look into this issue this can b solved using some basic css .

@possumbilities
Copy link
Contributor

@Raja-Abrar-Khan is the issue that they are not taking up equal vertical height?

@possumbilities possumbilities added 🧹 status: ticket work required Needs more details before it can be worked on and removed 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work labels Oct 22, 2024
@possumbilities possumbilities moved this from Triage to Backlog in possumbilities Oct 22, 2024
@Raja-Abrar-Khan
Copy link
Contributor Author

@possumbilities yes they are not taking the vertical height equally, as you can see in the height is looking all better in the normal screen but when it comes to the mobile screen it is not working as it was working in the main screen(desktop view) .

@kris70lesgo
Copy link

Hi @possumbilities @Raja-Abrar-Khan , I’ve reviewed the issue with the blue boxes in the mobile view. It seems that a PR (#236) was linked to resolve this. I will check if it has been merged and whether the issue is fully addressed. If not, I’d be happy to make the necessary CSS adjustments to ensure proper alignment and scaling on mobile views.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
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: ticket work required Needs more details before it can be worked on
Projects
possumbilities
Status: Backlog
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Mobile alignment blue boxes vickova/vocabulary
3 participants
@Raja-Abrar-Khan @possumbilities @kris70lesgo