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.

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

v1: Fixed grid column breakpoints not working? #3725

Closed
pljspahn opened this issue Mar 21, 2024 · 1 comment
Closed

v1: Fixed grid column breakpoints not working? #3725

pljspahn opened this issue Mar 21, 2024 · 1 comment

Comments

@pljspahn
Copy link

pljspahn commented Mar 21, 2024

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma 1.0.0 [x.x.x]
My browser is: Firefox Linux 123.0.1

I'm using the CDN version: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">

Description

My home page grid previously used Tiles so I'm converting them to a fixed grid and would like to force specific column counts for mobile and desktop. I've swapped out classes, and now have:

<div class="container fixed-grid has-cols-1-mobile has-cols-3-desktop">
    <div class="grid">
        {% for category in categories %}
        <a class="cell m-2" href="{% url 'signs-category-list' category=category %}">
            <div class="box">
                <h2 class="title has-text-centered">{{category.title}}</h2>
                <div class="image is-128x128 mx-auto">
                    <img src="{% static category.image_url %}" alt="">
                </div>
            </div>
        </a>
       {% endfor %}
    </div>
</div>

Steps to Reproduce

Use the fixed-grid has-cols-$n-$breakpoint classes.

Expected behavior

The column count to match the class value.

Actual behavior

The column count remains at the default of 2.

@pljspahn
Copy link
Author

I looked at the unminified CSS file and it appears there's simply a typo on either the documentation or the CSS.

Documentation says to use: has-cols-3-desktop

The CSS file uses: has-3-cols-desktop

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 a pull request may close this issue.

1 participant