diff --git a/babybuddy/static_src/scss/forms.scss b/babybuddy/static_src/scss/forms.scss index 0af94158..6060c550 100644 --- a/babybuddy/static_src/scss/forms.scss +++ b/babybuddy/static_src/scss/forms.scss @@ -33,6 +33,20 @@ z-index: 1030; } +.pill-container { + display: flex; + flex-wrap: wrap; + column-gap: 10px; + row-gap: 10px; +} + +// Only grow pill buttons on when using a mobile +@include media-breakpoint-down(sm) { + .pill-container>label { + flex-grow: 1; + } +} + // Tweak padding on form field help blocks. .help-block { ul { diff --git a/core/templates/core/pill_radio.html b/core/templates/core/pill_radio.html index bfdd1293..d375236e 100644 --- a/core/templates/core/pill_radio.html +++ b/core/templates/core/pill_radio.html @@ -1,5 +1,5 @@ {% with id=widget.attrs.id %} -