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

[Arinzelight]

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

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.

[mannika763]

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

[Arinzelight]

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]

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.

[iyinolawumi]

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]

@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]

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]

@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]

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