matcornic/hugo-theme-learn

mermaid gantt graph in small screen

Open

#257 opened on Mar 28, 2019

View on GitHub
 (2 comments) (0 reactions) (0 assignees)HTML (1,575 stars) (1,427 forks)batch import
help wanted

Description

when theme embed a mermaid gantt graph, the abscissa scale shows a terrible result in mobile (iphone 6/7 plus screen),any idea?

mermaid gantt graph in small screen

Contributor guide

Tech stack
htmlcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
CSSresponsive design basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
The issue reports that a mermaid gantt chart's abscissa scale is distorted on small screens (iPhone 6/7 Plus). The fix likely involves adding responsive CSS rules for the mermaid container. Inspect the theme's CSS files (e.g., static/css) for existing mermaid styling and add media queries to adjust the chart's width or overflow behavior on small screens. Check if the theme uses a specific mermaid version or configuration that affects rendering.