Twitch TV, layout breaks at mobile breakpoint (until 768px) using BULMA [CLOSED]

Twitch TV, layout breaks at mobile breakpoint (until 768px) using BULMA [CLOSED]
0.0 0

#1

Hey Campers,

I decided to try out a CSS framework and I am using Bulma for the first time in the Twitch TV project but my layout breaks at mobile breakpoint (until 768px).
Could someone please help me out with this?


#2

You have changed your code again and now it looks completely different. Switch it back to the way it shows above. After you switch it, I think I know a way to fix it.


#3

Done @randelldawson


#4

Well, I only figured out how to make the top look a little better when the screen width is smaller.

You need to change your css for section.box to:

section.box {
  min-height: 4.65rem;
}

#5

@randelldawson
I am trying to fix the first issue. Do you have any idea which styles to apply to buttons and the search box so they are put one after another vertically centered?

max-width(600px) Capture


#6

Hey Guys,

Does anyone have any idea which styles to apply to the buttons and the search box so they are put one below the other (centered)?

(The buttons are inside the div with the id=“buttons” while the search box is floated right inside the div with class=“is-pulled-right”)
max-width(600px) Capture

<section class="container box">
  <div id="buttons">
    <input type="submit" value="All" class="all button is-info is-outlined">
    <input type="submit" value="Online" class="online button is-success is-outlined">
    <input type="submit" value="Offline" class="offline button is-warning is-outlined">
  </div>
  </div>
  <div class="is-pulled-right">
    <div class="field has-addons">
      <p class="control">
        <input type="search" class="input" placeholder="Search streamers..." id="filterInput">
      </p>
      <p class="control">
        <a href="" class="button is-info">Search</a>
      </p>
    </div>
</section>