Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

miigaa's avatar
Level 24

Can't use Bulma.css responsiveness

I have a code like below.

.post-title {
    text-align: left;

    +mobile {
        text-align: center;
    }
}

but it is not working. Does anyone know what the problem is?

0 likes
7 replies
Snapey's avatar
Snapey
Best Answer
Level 122

are you compiling it with elixir / gulp?

jlrdw's avatar

That just looks like regular css, not Bulma.css. Don't you just use their library in your html elements, not write the css yourself?

miigaa's avatar
Level 24

@jlrdw I'm just trying to use bulma's responsiveness mixins but i can't. Search on google did not found.

+mobile, +tablet etc ...

schmidtke182's avatar

@selmonal you are compiling it with elixir/gulp, but in a scss or sass file?

as far as I know:

.post-title
  text-align: left

  +mobile
    text-align: center

is sass syntax and will only work if you rename your app.scss to app.sass (also in your gulp file). I haven't tested your code but it should help and the css output of your code should be something like:

.post-title {
  text-align: left;
}
@media screen and (max-width: 768px) {
  .post-title {
    text-align: center;
  }
}
kyslik's avatar

You want to use

@include tablet {
    //some styles here
}

Please or to participate in this conversation.