Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Style error when custom max-width

See original GitHub issue

Describe the bug

Reproduction

When I custom the max-width use --vp-layout-max-width: 1680px;

Then style of sidebar is ugly when I resize the window.

Expected behavior

The title of the header and the sidebar are always aligned.

System Info

System:
    OS: macOS 12.4
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.91 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
    Yarn: 1.22.18 - /opt/homebrew/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
  Browsers:
    Chrome: 104.0.5112.79
    Firefox: 101.0
    Safari: 15.5
  npmPackages:
    vitepress: ^1.0.0-alpha.4 => 1.0.0-alpha.4

Additional context

No response

Validations

Follow our Code of Conduct
Read the docs.
Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.

Issue Analytics

State:
Created a year ago
Comments:8 (2 by maintainers)

Top GitHub Comments

1reaction

songispmcommented, Aug 11, 2022

@media (min-width: xxxx)

How @media dynamic setting? I don’t konw.

by js ?

maxWidth by config.js instead of css?

0reactions

brc-ddcommented, Aug 11, 2022

Okay, so what can we fix here at VitePress? I don’t think we can use var inside media queries.

Top Results From Across the Web

max-width - CSS: Cascading Style Sheets - MDN Web Docs

The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger...

Why would max-width not work on this? - Stack Overflow

For max-width to work correctly, your element first needs a certain width . Use 100% to achieve what you want. See here:.

CSS syntax error in tag 'style amp-custom' - WordPress.org

Hello, I am experiencing a AMP warning from google search console. I inquired with the WordPress developers and they said it was best...

CSS Layout - width and max-width - W3Schools

Note: The problem with the <div> above occurs when the browser window is smaller than the width of the element. The browser then...

Overview - Bootstrap

Choose from a responsive, fixed-width container (meaning its max-width changes at ... and then show at the `sm` breakpoint .custom-class { display: none;...