Columns gap does nothing on mobile

[northamerican]

This is about Bulma 0.9.2

Columns gaps are set using a class like columns is-variable is-1. In the documentation, gaps can be set on mobile display sizes using a -mobile helper: columns is-variable is-1-mobile. However on mobile, columns are stacked by default. So in the example in the documentation, is-1-mobile does nothing to change the layout. To reproduce, change that class to is-3-mobile and see how it has no effect on the layout.

My intent is that on mobile there is a vertical gap between each column but it seems like Bulma does not offer such functionality. At all sizes, the --columnGap is set on the left and right padding but not top and bottom.

padding-left: var(--columnGap);
padding-right: var(--columnGap);

Either the documentation should clarify that is-n-mobile does nothing without is-mobile, or such functionality to adjust vertical gap at mobile viewport should be introduced.

I can file a PR if such a feature makes sense.

[letsbuildafire]

This PR fixes the responsive horizontal gaps #3202

[northamerican]

thanks @letsbuildafire, i'll close this issue.

[northamerican]

Actually this is not the same thing, @letsbuildafire.

My issue is that the gaps have no effect on mobile at all. On mobile, is-n-mobile should insert more space between each column on the top and bottom - or an option for such thing should be provided.

Something like

.columns.is-variable .column
  @include mobile
    padding-top: var(--columnGap);
    padding-bottom: var(--columnGap);

[letsbuildafire]

Yeah, it fixes the horizontal gaps. I didn't add in vertical gaps as that would have been a new feature. But I'm all for being able to adjust vertical gaps too.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.