'Change hovered dropdown content-Bulma

I am using Bulma and I made an hoverable dropdown, but the dropdown content exceeds the whole page content. How can I make it fixed with larger width and also responsive?

For now it looks like this: enter image description here

Html code:

 <div class="navbar-end">
<div class="dropdown is-hoverable navbar-item ">
  <div class="dropdown-trigger">
    <button aria-controls="dropdown-menu6" aria-haspopup="true" class="button is-primary">
      <strong>Account</strong>
    </button>
  </div>
  <div class="dropdown-menu has-text-centered" id="dropdown-menu6" role="menu">
    <div class="dropdown-content">
      <div class="dropdown-item">
        <p>Acces your quizbee account, test your skills and have fun. </p>
        <hr class="dropdown-divider">
        <div class="buttons is-centered">
          <button class="button is-primary is-rounded">Register</button>
          <button class="button is-light is-rounded">Login</button>
        </div>
      </div>
    </div>
  </div>
</div>
htmlcssbulma


Solution 1:[1]

You just need to set a position of dropdown. Add class is-right

<div class="dropdown is-right is-active">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 richa_pandey

Related Questions