diff --git a/CHANGELOG.md b/CHANGELOG.md index 574bfe87..af9584bf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ * #3005 Fix `column` offsets in RTL * Fix #3145 Dropdown content is bounded by a parent card * Fix #3089 Sub columns of a variable columns have weird gap +* Fix #2937 Add `width: unset` for narrow columns ### Improvements diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 54078d90..9ad23d81 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -6941,6 +6941,7 @@ label.panel-block:hover { .columns.is-mobile > .column.is-narrow { flex: none; + width: unset; } .columns.is-mobile > .column.is-full { @@ -7149,6 +7150,7 @@ label.panel-block:hover { @media screen and (max-width: 768px) { .column.is-narrow-mobile { flex: none; + width: unset; } .column.is-full-mobile { flex: none; @@ -7313,6 +7315,7 @@ label.panel-block:hover { @media screen and (min-width: 769px), print { .column.is-narrow, .column.is-narrow-tablet { flex: none; + width: unset; } .column.is-full, .column.is-full-tablet { flex: none; @@ -7477,6 +7480,7 @@ label.panel-block:hover { @media screen and (max-width: 1023px) { .column.is-narrow-touch { flex: none; + width: unset; } .column.is-full-touch { flex: none; @@ -7641,6 +7645,7 @@ label.panel-block:hover { @media screen and (min-width: 1024px) { .column.is-narrow-desktop { flex: none; + width: unset; } .column.is-full-desktop { flex: none; @@ -7805,6 +7810,7 @@ label.panel-block:hover { @media screen and (min-width: 1216px) { .column.is-narrow-widescreen { flex: none; + width: unset; } .column.is-full-widescreen { flex: none; @@ -7969,6 +7975,7 @@ label.panel-block:hover { @media screen and (min-width: 1408px) { .column.is-narrow-fullhd { flex: none; + width: unset; } .column.is-full-fullhd { flex: none; diff --git a/sass/grid/columns.sass b/sass/grid/columns.sass index 995bf247..af365864 100644 --- a/sass/grid/columns.sass +++ b/sass/grid/columns.sass @@ -8,6 +8,7 @@ $column-gap: 0.75rem !default padding: $column-gap .columns.is-mobile > &.is-narrow flex: none + width: unset .columns.is-mobile > &.is-full flex: none width: 100% @@ -65,6 +66,7 @@ $column-gap: 0.75rem !default +mobile &.is-narrow-mobile flex: none + width: unset &.is-full-mobile flex: none width: 100% @@ -123,6 +125,7 @@ $column-gap: 0.75rem !default &.is-narrow, &.is-narrow-tablet flex: none + width: unset &.is-full, &.is-full-tablet flex: none @@ -201,6 +204,7 @@ $column-gap: 0.75rem !default +touch &.is-narrow-touch flex: none + width: unset &.is-full-touch flex: none width: 100% @@ -258,6 +262,7 @@ $column-gap: 0.75rem !default +desktop &.is-narrow-desktop flex: none + width: unset &.is-full-desktop flex: none width: 100% @@ -315,6 +320,7 @@ $column-gap: 0.75rem !default +widescreen &.is-narrow-widescreen flex: none + width: unset &.is-full-widescreen flex: none width: 100% @@ -372,6 +378,7 @@ $column-gap: 0.75rem !default +fullhd &.is-narrow-fullhd flex: none + width: unset &.is-full-fullhd flex: none width: 100%