Bulma forcing new lines in small displays with levels

Hi,

I'm using Bulma's level helper to inline components, my issue is that with smaller displays different level sides/items will be placed in seperate lines, even though I need them to be in-line.

My code:

<div class="level">
    <div class="level-left">
        <span class="level-item">
            <img src="/img/channel.svg" v-if="!channel.channel.spacer">
        </span>
        <span class="level-item" v-text="channel.channel.name" v-if="!channel.channel.spacer"></span>

        <span class="level-item" v-text="channel.channel.spacerName" v-if="channel.channel.spacer && channel.channel.spacerAlignment == 1"></span>
        <span class="level-item" v-if="channel.channel.spacer && channel.channel.spacerName.length == 0"><br></span>
    </div>

    <div class="level-center">
        <span class="level-item" v-text="channel.channel.spacerName" v-if="channel.channel.spacerAlignment == 2 || channel.channel.spacerAlignment == 4"></span>
    </div>

    <div class="level-right">
        <span class="level-item" v-text="channel.channel.spacerName" v-if="channel.channel.spacerAlignment == 3"></span>
    </div>
</div>

This is how it should look: Screenshot

But this is how it actually looks: Screenshot

Any idea how I can fix it from being different lines?

Jaytee

9 years ago

Level 39

Of course it's going to display as a column rather than a row because it's accommodating the smaller screen size.

This is basic CSS (Flex), so you should really know this, more specifically responsiveness.

I suggest you dive into the CSS yourself and resolve the issue. It really is not hard. Yes the whole point of this forum is to provide help but even a beginner could fix this problem.

edoc

9 years ago

Best Answer

Level 24

try to see if adding is-mobile works

<div class="level is-mobile">

2 likes

melkhior

9 years ago

Level 3

@edoc that solved it :)

Thanks!

Please or to participate in this conversation.