Describe the bug
On the Case Studies page, case study cards do not adapt properly to mobile screen sizes. The card layout remains side-by-side, causing the description text to be compressed into a very narrow column. As a result, the text wraps excessively, reducing readability and creating a poor user experience on mobile devices.
To Reproduce
Steps to reproduce the behavior:
- Go to
https://kubeedge.io/case-studies
- Open Developer Tools and enable Device Toolbar (mobile view)
- Select a mobile device profile (e.g., iPhone SE, iPhone 12, Galaxy S20)
- Scroll down to the case study cards section
- Observe the layout and text wrapping within the cards
Expected behavior
The case study cards should be fully responsive on mobile devices. The image and content sections should stack vertically or adjust their layout to provide sufficient width for the description text, ensuring comfortable readability without excessive line wrapping.
Actual behavior
The case study cards retain a desktop-style side-by-side layout on small screens. The description text is constrained to a narrow column, causing excessive wrapping and making the content difficult to read.
Screenshots
Attached screenshot demonstrates the issue on a mobile viewport, where the case study description is compressed into a narrow area and wraps almost every few words.
Desktop (please complete the following information):
- OS: Windows 11
- Browser: Google Chrome
- Version: Latest
Smartphone (please complete the following information):
- Device: Reproduced using Chrome DevTools mobile emulation (e.g., iPhone SE / iPhone 12)
- OS: iOS (emulated)
- Browser: Chrome DevTools Device Mode
- Version: Latest
Additional context
This issue appears to be related to the responsive design of the case study card component. A mobile-friendly layout (such as stacking image and text vertically) would improve readability and user experience on smaller screens.
Describe the bug
On the Case Studies page, case study cards do not adapt properly to mobile screen sizes. The card layout remains side-by-side, causing the description text to be compressed into a very narrow column. As a result, the text wraps excessively, reducing readability and creating a poor user experience on mobile devices.
To Reproduce
Steps to reproduce the behavior:
https://kubeedge.io/case-studiesExpected behavior
The case study cards should be fully responsive on mobile devices. The image and content sections should stack vertically or adjust their layout to provide sufficient width for the description text, ensuring comfortable readability without excessive line wrapping.
Actual behavior
The case study cards retain a desktop-style side-by-side layout on small screens. The description text is constrained to a narrow column, causing excessive wrapping and making the content difficult to read.
Screenshots
Attached screenshot demonstrates the issue on a mobile viewport, where the case study description is compressed into a narrow area and wraps almost every few words.
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
This issue appears to be related to the responsive design of the case study card component. A mobile-friendly layout (such as stacking image and text vertically) would improve readability and user experience on smaller screens.