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

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?

3

Done @camperextraordinaire…

5

@camperextraordinaire
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>