Current Behavior
On this page: https://layer5.io/cloud-native-management/meshery/integrations, especially on mobile devices, the integration logos are displayed one per row, resulting in excessive vertical scrolling. Additionally, the hover-based interaction is not user-friendly on mobile, preventing users from viewing integration descriptions.
On desktop (as well as on mobile), several integrations share the same logo image. To distinguish between them, users must hover over each logo, which is not always intuitive.
Desired Situation
- Display at least two integration logos per row on mobile to reduce scrolling.
- Show the integration description below each logo on both desktop and mobile. A visual separator (e.g., a horizontal line) can be used between the logo and the text.
- Truncate the description text if it exceeds three lines to maintain a consistent card height.
- Remove the hover effect and the animation.
Why these changes should be implemented together
Placing the integration description below the logo can affect the card dimensions. To maintain a balanced layout, especially on mobile, it would be preferable to slightly increase the card height rather than its width. Implementing these changes together ensures visual consistency and improves usability across screen sizes.
Images
- Mobile view
- Desktop
Contributor Resources and Handbook
The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.
Join the Layer5 Community by submitting your community member form.
Current Behavior
On this page: https://layer5.io/cloud-native-management/meshery/integrations, especially on mobile devices, the integration logos are displayed one per row, resulting in excessive vertical scrolling. Additionally, the hover-based interaction is not user-friendly on mobile, preventing users from viewing integration descriptions.
On desktop (as well as on mobile), several integrations share the same logo image. To distinguish between them, users must hover over each logo, which is not always intuitive.
Desired Situation
Why these changes should be implemented together
Placing the integration description below the logo can affect the card dimensions. To maintain a balanced layout, especially on mobile, it would be preferable to slightly increase the card height rather than its width. Implementing these changes together ensures visual consistency and improves usability across screen sizes.
Images
Contributor Resources and Handbook
The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the
masterbranch.