Skip to content

Fix testimonial card overflow on small screens#816

Open
delishariyona wants to merge 3 commits intosugarlabs:mainfrom
delishariyona:fix-testimonial-image-shrink
Open

Fix testimonial card overflow on small screens#816
delishariyona wants to merge 3 commits intosugarlabs:mainfrom
delishariyona:fix-testimonial-image-shrink

Conversation

@delishariyona
Copy link

📝 Description

This PR makes the testimonial cards responsive on small screens by replacing a fixed width with a viewport-based width and a max-width constraint.

It improves readability and prevents horizontal overflow on mobile devices while keeping the desktop layout unchanged.


🔗 Related Issue

N/A


🔄 Type of Change

  • 🎨 UI/UX Update (visual changes, styling improvements)
  • 🐛 Bug Fix

📷 Visual Changes

Tested using Chrome DevTools mobile emulation. Screenshots can be added if required.


🧪 Testing Performed

📱 Browser Compatibility

  • Chrome (Version: latest)
  • Mobile Chrome (Device: Chrome DevTools emulation)

🖥️ Responsive Design

  • Desktop (1200px+)
  • Tablet (768px - 1199px)
  • Mobile (320px - 767px)

✅ Test Cases

  1. Verified testimonial cards render correctly on desktop without layout changes.
  2. Verified cards adapt to screen width on mobile devices.
  3. Confirmed no horizontal scrolling or overflow on small screens.

♿ Accessibility

  • Proper heading hierarchy maintained

📋 PR Checklist

  • My code follows the project's coding style guidelines
  • I have tested these changes locally
  • My changes generate no new warnings or console errors

💭 Additional Notes

This change is intentionally minimal and avoids modifying existing animations or the desktop layout.

@github-actions
Copy link

❌ Checks Failed

Status: 🚫 Not ready to merge

Please fix the following issues before merging:

🔨 Continuous Integration Failed

Issue: The build process failed to complete.

How to fix:

  1. Run npm run build locally to identify the issue
  2. Fix any TypeScript compilation errors
  3. Ensure all dependencies are properly installed
  4. Test your changes before pushing

📝 Code Linting Failed

Issue: Code formatting or style violations detected.

Specific problems:

• TypeScript linting failed
• Code formatting issues detected

How to fix:

Platform Command Description
🐧 Unix/macOS/Linux npm run format Auto-fix all formatting issues
🪟 Windows npm run format:file <filename> Fix specific files
🔍 Check Only npm run format:check Check formatting without fixing

Need help with linting? Check out the Linting Guide for Windows Users for detailed instructions.


🛠️ Next Steps

  1. Fix the issues mentioned above
  2. Test locally to ensure everything works
  3. Push your fixes to this branch
  4. Wait for re-check - This bot will automatically run again

🤖 This comment will be updated automatically when you push new commits

@github-actions
Copy link

❌ Checks Failed

Status: 🚫 Not ready to merge

Please fix the following issues before merging:

📝 Code Linting Failed

Issue: Code formatting or style violations detected.

Specific problems:

• Code formatting issues detected

How to fix:

Platform Command Description
🐧 Unix/macOS/Linux npm run format Auto-fix all formatting issues
🪟 Windows npm run format:file <filename> Fix specific files
🔍 Check Only npm run format:check Check formatting without fixing

Need help with linting? Check out the Linting Guide for Windows Users for detailed instructions.


🛠️ Next Steps

  1. Fix the issues mentioned above
  2. Test locally to ensure everything works
  3. Push your fixes to this branch
  4. Wait for re-check - This bot will automatically run again

🤖 This comment will be updated automatically when you push new commits

@github-actions
Copy link

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow Status Details
🔨 Continuous Integration ✅ Passed Build completed successfully
📝 Code Linting ✅ Passed All formatting and style checks passed

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏

@FirePheonix
Copy link
Contributor

provide some before and after ss?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants