diff --git a/CHANGELOG.md b/CHANGELOG.md index 4b983875..8e1c829a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ * #2396 Update docs with webpack 4 example * #2381 Make centered buttons have equal margin +* Fix #2297 -> Remove `.container` fixed width values, use `flex-grow` ### Bug fixes diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index e2c30812..3a2eaa8c 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -2778,48 +2778,44 @@ fieldset[disabled] .button { } .container { + flex-grow: 1; margin: 0 auto; position: relative; + width: auto; } @media screen and (min-width: 1024px) { .container { max-width: 960px; - width: 960px; } .container.is-fluid { margin-left: 32px; margin-right: 32px; max-width: none; - width: auto; } } @media screen and (max-width: 1215px) { .container.is-widescreen { max-width: 1152px; - width: auto; } } @media screen and (max-width: 1407px) { .container.is-fullhd { max-width: 1344px; - width: auto; } } @media screen and (min-width: 1216px) { .container { max-width: 1152px; - width: 1152px; } } @media screen and (min-width: 1408px) { .container { max-width: 1344px; - width: 1344px; } } diff --git a/sass/elements/container.sass b/sass/elements/container.sass index 2aaf591a..98f249ed 100644 --- a/sass/elements/container.sass +++ b/sass/elements/container.sass @@ -1,25 +1,21 @@ .container + flex-grow: 1 margin: 0 auto position: relative + width: auto +desktop max-width: $desktop - (2 * $gap) - width: $desktop - (2 * $gap) &.is-fluid margin-left: $gap margin-right: $gap max-width: none - width: auto +until-widescreen &.is-widescreen max-width: $widescreen - (2 * $gap) - width: auto +until-fullhd &.is-fullhd max-width: $fullhd - (2 * $gap) - width: auto +widescreen max-width: $widescreen - (2 * $gap) - width: $widescreen - (2 * $gap) +fullhd max-width: $fullhd - (2 * $gap) - width: $fullhd - (2 * $gap)