Resource Page Not Responsive in Mobile View (ID: resourceContainer)

[Shakeelkhuhro]

I would like to report an issue regarding the responsiveness of the resource page on the website when viewed on mobile devices. The specific element affected is the resourceContainer identified by its ID.

Problem: When accessing the resource page on a mobile device, the resourceContainer does not adjust properly to the smaller screen size. As a result, the content within the container overlaps or becomes difficult to read, negatively impacting the user experience.

Steps to Reproduce:

Open the website on a mobile device. Navigate to the resource page. Observe the resourceContainer element, and notice how it behaves in the mobile view. Expected Behavior: In the mobile view, the resourceContainer should adapt responsively to the screen size, ensuring that the content is displayed in a legible and user-friendly manner. The container should resize, stack, or adjust its layout accordingly to prevent overlapping or truncation of the content.

I have tested this issue on multiple mobile devices and across various browsers, and the problem persists. This issue is specific to the resource page and the resourceContainer element.

Screenshots for reference Before:

After: (I will also set Sidebar which is not set in this image yet)

Please assign this issue to me under GSSOC'23 and also let me know if any further details are required to address and resolve this issue promptly. Thank you.

[Lavesh12]

please assign me this issue