Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Navbar broken for certain "grid is-col-min-..." and viewport combinations #3944

Open
davetapley opened this issue Dec 3, 2024 · 1 comment
Open

Navbar broken for certain "grid is-col-min-..." and viewport combinations #3944

davetapley opened this issue Dec 3, 2024 · 1 comment

Comments

@davetapley
Copy link

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version [1.0.2]
My browser is: Chromium: 131.0.6778.85 (Official Build) (x86_64]

I am sure this issue is not a duplicate

Description

Use devtools set to responsive and observe navbar behaves strangely when narrowing the view port below 600px.

Steps to Reproduce

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello Bulma!</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"
    />
  </head>
  <body>
    <nav class="navbar" style="background-color: teal">
      <span class="navbar-item">Hello Bulma!</span>
    </nav>
    <div class="section">
      <div class="grid is-col-min-24">
        <div class="cell">
          <div class="box">cell one</div>
        </div>
        <div class="cell">
          <div class="box">cell two</div>
        </div>
        <div class="cell">
          <div class="box">cell three</div>
        </div>
      </div>
    </div>
  </body>
</html>

Expected behavior

Navbar covers full width of viewport:

Screenshot_12_3_24__2_08_PM

Actual behavior

Below 600px it does not:

Screenshot_12_3_24__2_07_PM
@davetapley
Copy link
Author

davetapley commented Dec 3, 2024 •
edited
Loading

Note the 600px is a result of using is-col-min-24, if you change to e.g. is-col-min-12 then it breaks at 300px.

And since is-col-min is based on rem the exact values won't quite match.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@davetapley