Skip to content

Fix Blog View Mobile Responsiveness #1586

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Fix Blog View Mobile Responsiveness #1586

wants to merge 4 commits into from

Conversation

Copilot
Copy link

@Copilot Copilot AI commented May 23, 2025

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.

Copy link

vercel bot commented May 23, 2025

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

@Copilot Copilot AI changed the title [WIP] Blog view is not mobile responsive Fix Blog View Mobile Responsiveness May 23, 2025
@Copilot Copilot AI requested a review from mcclowes May 23, 2025 10:20
Copilot finished work on behalf of mcclowes May 23, 2025 10:20
@mcclowes
Copy link
Contributor

Screenshot 2025-05-23 at 11 21 42

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

Copy link
Author

Copilot AI commented May 23, 2025

Screenshot 2025-05-23 at 11 21 42

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

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.

Blog view is not mobile responsive
2 participants