Fix Blog View Mobile Responsiveness

[Copilot]

Issue

The blog view wasn't properly responsive on mobile and tablet devices due to missing media queries for smaller viewport sizes. The layout had a fixed width that wouldn't shrink to accommodate smaller screens.

Changes Made

Added responsive styling to the blog layout to ensure proper display on mobile and tablet devices:

• Modified blogWrapper to change from row to column layout on mobile screens
• Added media queries using the existing breakpoint of 996px (matches other responsive patterns)
• Ensured containers and content take full width on smaller screens
• Adjusted padding and spacing for better mobile display
• Applied consistent responsive styling across blog components

Before/After

Before: Blog view had a minimum width and wouldn't shrink to fit mobile screens, causing horizontal scrolling

After: Blog view now properly adjusts to different screen sizes with appropriate layouts for each viewport

This is a focused change targeting only the blog layout responsiveness without affecting other parts of the site.

Fixes #1585.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
codat-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 23, 2025 10:33am

[mcclowes]

Within the blog article view the page still isn't responsive

[Copilot]

Within the blog article view the page still isn't r...

I've improved the blog article view responsiveness for mobile devices in commit 54871ef. The changes include:

1. Fixed overflow issues by adding overflow-x: hidden to prevent horizontal scrolling
2. Added proper padding and margin adjustments for mobile views
3. Ensured content (including headings, text, and images) wraps appropriately
4. Fixed image and code block display to respect container width
5. Improved footer layout on smaller screens