Skip to content

fix code flow overflow and add responsive design fix #3229

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

Shawanga
Copy link

@Shawanga Shawanga commented Jul 6, 2025

Description

Fixes code block overflow issues by adding proper CSS overflow handling and responsive design: Code blocks overflow and don't scale properly #3228

Changes Made to _base.scss

  • Added overflow-x: auto to enable horizontal scrolling for long code lines
  • Added white-space: pre to preserve code formatting while allowing horizontal scrolling
  • Added word-wrap: normal to prevent wrapping of long lines
  • Added -webkit-overflow-scrolling: touch for smooth iOS scrolling
  • Added responsive font sizes for different breakpoints (576px, 400px, and 768px)
  • Applied fixes to pre, code, and figure.highlight elements

Related Issue

Closes #3228

Copy link

netlify bot commented Jul 6, 2025

Deploy Preview for relaxed-lollipop-b6bc17 failed. Why did it fail? →

Name Link
🔨 Latest commit 30becc1
🔍 Latest deploy log https://app.netlify.com/projects/relaxed-lollipop-b6bc17/deploys/686b0c8e89104a00083ad299

@Shawanga Shawanga changed the title fix code flow overflow and add responsive design fix #3228 fix code flow overflow and add responsive design fix Jul 6, 2025
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.

Code blocks overflow and don't scale properly
1 participant