[BUG] Improve Responsiveness of /resources/cheatsheets Route for Mobile and Tablet Devices

[sahil28032005]

Describe the bug

Problem: The /resources/cheatsheets route of the website is currently not fully responsive for mobile and tablet devices. When accessed on smaller screens, several layout issues arise, including:

Text and elements overflowing or misaligned.
Buttons and links becoming difficult to interact with.
The overall layout not scaling or adapting properly to different screen sizes.
These issues negatively impact the user experience, especially for users who rely on mobile or tablet devices to access the website's content.

To Reproduce

Navigate to https://www.thecyberhub.org/resources/cheatsheets on a mobile or tablet device.
Observe layout issues such as:
Misaligned elements.
Overlapping or overflowing text.
Inaccessibility of interactive elements

Expected Behavior

When accessing the /resources/cheatsheets route on smaller screens:

Text and Content:
Text should remain legible without requiring horizontal scrolling.
Content should adapt to fit the screen size without overlapping or overflowing.
Interactive Elements:
Buttons and links should be appropriately sized for touch interaction and not clipped.
Layout:
The page layout should automatically adjust using a responsive grid or flexbox system.
Margins and padding should ensure no element appears cut-off or cramped.
Images and Icons:
Images should scale proportionally without losing quality or alignment.
Navigation:
Menus and headers should be collapsible or adapt to smaller screen sizes to maintain usability.

Screenshot/ Video

Code of Conduct

• I agree to follow this project's Code of Conduct