Fix Responsiveness Issue with Career Page Vacancy Cards on Smaller Screens

[Iamrushabhshahh]

Current Behavior

On the Careers page, a div containing multiple nested divs (representing cards for each open vacancy) flows to the left due to improper CSS properties. This issue occurs particularly when zooming in or using smaller screens, such as laptops or mobile devices.

Expected Behavior

The displayed design should consist of two responsive parts that adapt properly to device width upon resizing or zooming. The layout should remain consistent and visually aligned, ensuring optimal responsiveness across devices of varying screen sizes.

Steps to Reproduce

1. Navigate to https://layer5.io/careers.
2. Scroll down to the section showing open vacancies.
3. Zoom in or view the page on a device with a smaller screen.
4. Observe the cards flowing to the left, disrupting the layout.

Suggested Fix

• Ensure CSS properties such as flex-wrap: wrap or grid-template-columns are correctly applied to handle responsive behavior.
• Utilize media queries to adjust the layout for different screen sizes, ensuring components fit within the viewport without overflowing.
• Test the layout at various zoom levels and on different devices to confirm consistent responsiveness.

Screenshots/Logs

Environment Details

• Host OS: Windows
• Platform: Chrome
• Meshery Server Version: stable-v
• Meshery Client Version: stable-v

Additional Notes

Improving the responsiveness will enhance user experience and ensure the design remains functional across diverse device types.

[Iamrushabhshahh]

Hey @leecalcote,

Please review the reported responsiveness issue on the Careers page. If this is confirmed as an issue, kindly assign it to me for resolution.

Thank you.

[Ajay-singh1]

@Iamrushabhshahh This is not the correct repository to open this issue.Another issue has been opened on the main repo of layer5 by me.We can close this issue now.