Improve responsive layout for tablet and mobile devices

[mayasrl]

Overview

This PR improves the responsive behavior of thumbor.org by adding tablet breakpoints and converting fixed-width layouts to fluid ones, ensuring better user experience across different screen sizes.

Problem

• Fixed container width (1055px) causes horizontal scrolling on smaller screens
• Only one breakpoint (640px) exists, leaving tablets poorly supported
• Columns don't adapt properly between mobile and desktop viewports

Solution

Added tablet breakpoints (641px-1024px) for better adaptation across devices:

• Converted fixed-width container to fluid layout with max-width
• Removed problematic fixed width on smaller screens
• Enhanced column flexibility across different screen sizes
• Optimized typography scaling for various viewports
• Improved spacing and padding for tablet devices

Technical Details

Files Modified: 8 SCSS files
Lines Added: +162
Lines Removed: -11

Breakpoint Strategy

• Mobile: max-width 640px
• Tablet: 641px - 1024px
• Desktop: 1025px+

Testing

Verified layout behavior at common viewport widths:

• 375px, 640px (mobile)
• 768px, 1024px (tablet)
• 1280px, 1920px (desktop)

Impact

• Eliminates horizontal scrolling on intermediate screen sizes
• Better content readability on tablets
• No breaking changes to current functionality
• SCSS only - CSS compilation needed by maintainers

[fbtravi]

Great contribution! But you didn’t create a new commit — your changes were made on top of another commit.

[mayasrl]

Hi, thanks for catching that!
You're absolutely right, I accidentally amended the wrong commit. I've now created a proper new commit with the correct title and description for my responsive layout changes. The PR should be clean now. Could you please review it again? 🙏
PS: Thanks for your patience I'm still learning the ropes with Git! 😊