Responsiveness with Bulma mixins

The last design fixes required are harder to spot, because they only occur before or after certain breakpoints.

Since Bulma is fully responsive, some of its components are styled according to the viewport size.

Media

The media items in dashboard.html combine four elements side by side:

• 2 media-left
• 1 media-content
• 1 media-right

This makes the components squashed on mobile screens.

Instead, layout the four elements vertically:

@include mobile() {
  .media {
    flex-direction: column;
  }

  .media-left {
    margin: 0 0 0.5rem;
  }
}

The mobile() mixin comes from Bulma itself. It uses the $mobile variable breakpoint defined in initial-variables.sass. As a result, using this mixin instead of writing your own media query ensures that the responsiveness you write here is synchronized with Bulma’s own responsive behavior.

The last task is to fix the navbar dropdown on desktop screens:

@include desktop() {
  .navbar-dropdown .navbar-item {
 ...