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 responsiveness issue on program-index.html #110

Open
1 task done
Arinzelight opened this issue Oct 6, 2024 · 8 comments · May be fixed by #169, #264 or #267
Open
1 task done

[Bug] Mobile responsiveness issue on program-index.html #110

Arinzelight opened this issue Oct 6, 2024 · 8 comments · May be fixed by #169, #264 or #267
Labels
💻 aspect: code Concerns the software code in the repository 🛠 goal: fix Bug fix 🟨 priority: medium Not blocking but should be fixed soon 🏁 status: ready for work Ready for work

Comments

@Arinzelight
Copy link

Description

The related posts section in program-index.html is not displaying properly on mobile devices. The layout is not responsive, causing elements to overflow.

Reproduction

  1. Open program-index.html on a mobile device or in a responsive design testing tool.
  2. Scroll to the related posts section.
  3. Observe that the elements are not responsive and the layout breaks.
  4. See error.

Expectation

The related posts section should adjust to different screen sizes, stacking elements vertically on smaller screens while maintaining a clean and user-friendly layout.

Screenshots

program-page

Environment

  • Device: (e.g. iPhone 12, Samsung Galaxy S10)
  • OS: (e.g. iOS 14.4, Android 11)
  • Browser: (e.g. Safari, Chrome)
  • Version: (e.g. iOS 14.4; Chrome 92)
  • Other info: (e.g. screen resolution 375x812_)

Additional context

The CSS for the related posts section may need adjustments to ensure proper flexbox/grid settings

Resolution

  • I would be interested in resolving this bug.
@Arinzelight Arinzelight 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 6, 2024
@mannika763
Copy link

Hey @Arinzelight,
Could you let me know the process for assigning this issue to me?

@Arinzelight
Copy link
Author

Arinzelight commented Oct 6, 2024

Hi @mannika763,
if the issue has been updated to ready for work, you can of course go ahead and work on the task then create a pull request because more than one person can work on a task or approved issue

@possumbilities
Copy link
Contributor

possumbilities commented Oct 7, 2024

Work for this would need to discern whether this is a style change, or whether this is actually a markup change, since this behavior doesn't occur on other contexts utilizing the same element.

This issue is specifically about the Recent Posts not changing layout at narrower breakpoints. This element seems to appear correctly on other pages so this might be a matter of altering HTML structure only.

I would suggest those that wish to investigate a solution here to first investigate the cause.

@possumbilities possumbilities added 🟨 priority: medium Not blocking but should be fixed soon 🏁 status: ready for work Ready for work and removed 🟧 priority: high Stalls work on the project or its dependents 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work labels Oct 7, 2024
@iyinolawumi
Copy link
Contributor

Hi @possumbilities
I was able to do a small thing on this issue by adjusting the grid. Kindly check and please give a feedback. Thank you

@OmarAmeen01
Copy link
Contributor

@possumbilities in my PR #82 Made design system ui mobile responsive I fixed all these issues so you can close this issue and check that PR and provide me feedback on that . that PR deals with responsive in general in the design system and tries to fix these small issues on the way

@egbadon-victor
Copy link
Contributor

Hi @possumbilities .

Further investigation on this issue actually shows that it affects all occurences in other contexts. Hence, my approach would be a CSS targeted approach. Particularly targetting the grid style at lower screen sizes.

@OmarAmeen01
Copy link
Contributor

@egbadon-victor if you found same on other pages too raise the issue wait for its approval my PR got closed because it was covering fixes beyond mentioned in issue.

@egbadon-victor
Copy link
Contributor

@OmarAmeen01 yeah I understand. My PR for this issue will only cover the program-index page, even though it's a CSS targeted change

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment