We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
This is about Bulma. It's a bug or design issue/discussion.
This is about the Bulma CSS framework
I'm using Bulma version 1.0.0 My browser is: Chrome
I am sure this issue is not a duplicate? Yes
When I use cards with cell inside the grid, the last card has an extra size, and they should all have the same height
Codepen Example https://codepen.io/zkmark/pen/JjVZoNB
Code example
<section class="section"> <div class="container"> <div class="fixed-grid has-4-cols"> <div class="grid is-gap-3"> <article class="cell card"> <div class="card-image"> <figure class="image is-4by3"> <img src="https://bulma.io/assets/images/placeholders/1280x960.png" alt="Placeholder image" /> </figure> </div> <div class="card-content"> <div class="media"> <div class="media-left"> <figure class="image is-48x48"> <img src="https://bulma.io/assets/images/placeholders/96x96.png" alt="Placeholder image" /> </figure> </div> <div class="media-content"> <p class="title is-4">John Smith</p> <p class="subtitle is-6">@johnsmith</p> </div> </div> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. <a>@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a> <br /> <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time> </div> </div> </article> <article class="cell card"> <div class="card-image"> <figure class="image is-4by3"> <img src="https://bulma.io/assets/images/placeholders/1280x960.png" alt="Placeholder image" /> </figure> </div> <div class="card-content"> <div class="media"> <div class="media-left"> <figure class="image is-48x48"> <img src="https://bulma.io/assets/images/placeholders/96x96.png" alt="Placeholder image" /> </figure> </div> <div class="media-content"> <p class="title is-4">John Smith</p> <p class="subtitle is-6">@johnsmith</p> </div> </div> <div class="content"> Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,consectetur adipiscing elit. Phasellus nec iaculis mauris. <a>@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a> <br /> <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time> </div> </div> </article> <article class="cell card"> <div class="card-image"> <figure class="image is-4by3"> <img src="https://bulma.io/assets/images/placeholders/1280x960.png" alt="Placeholder image" /> </figure> </div> <div class="card-content"> <div class="media"> <div class="media-left"> <figure class="image is-48x48"> <img src="https://bulma.io/assets/images/placeholders/96x96.png" alt="Placeholder image" /> </figure> </div> <div class="media-content"> <p class="title is-4">John Smith</p> <p class="subtitle is-6">@johnsmith</p> </div> </div> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. <a>@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a> <br /> <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time> </div> </div> </article> <article class="cell card"> <div class="card-image"> <figure class="image is-4by3"> <img src="https://bulma.io/assets/images/placeholders/1280x960.png" alt="Placeholder image" /> </figure> </div> <div class="card-content"> <div class="media"> <div class="media-left"> <figure class="image is-48x48"> <img src="https://bulma.io/assets/images/placeholders/96x96.png" alt="Placeholder image" /> </figure> </div> <div class="media-content"> <p class="title is-4">John Smith</p> <p class="subtitle is-6">@johnsmith</p> </div> </div> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. <a>@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a> <br /> <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time> </div> </div> </article> </div> </div> </div> </section>
All cards should have the same height within the grid
The last card has a larger height
The text was updated successfully, but these errors were encountered:
Also has this problem when using grid with cell box classes.
<div class="grid"> <div class="cell box"> Normal Size </div> <div class="cell box"> Normal Size </div> <div class="cell box"> Extra row in box </div> </div>
Sorry, something went wrong.
No branches or pull requests
This is about Bulma.
It's a bug or design issue/discussion.
Overview of the problem
This is about the Bulma CSS framework
I'm using Bulma version 1.0.0
My browser is: Chrome
I am sure this issue is not a duplicate? Yes
Description
When I use cards with cell inside the grid, the last card has an extra size, and they should all have the same height
Steps to Reproduce
Codepen Example
https://codepen.io/zkmark/pen/JjVZoNB
Code example
Expected behavior
All cards should have the same height within the grid
Actual behavior
The last card has a larger height
The text was updated successfully, but these errors were encountered: