diff --git a/components/02-molecules/alert/_alert.scss b/components/02-molecules/alert/_alert.scss index a197e20c8..6ca77f23f 100644 --- a/components/02-molecules/alert/_alert.scss +++ b/components/02-molecules/alert/_alert.scss @@ -5,10 +5,11 @@ $alert-color: $brand-white; display: flex; flex-wrap: nowrap; justify-content: space-between; - padding: $container-spacer-y-sm $container-spacer-x-sm; + margin-bottom: $content-spacer-sm; + padding: $spacer-xs; line-height: $alert-line-height; color: $alert-color; - font-size: $alert-font-size; + font-size: $alert-font-size-sm; &--info { background-color: $brand-info; @@ -28,3 +29,12 @@ $alert-color: $brand-white; @extend %base-button; color: inherit; } + + +@media screen and (min-width: $grid-breakpoint-md) { + .alert { + margin-bottom: $content-spacer-base; + padding: $container-spacer-y-sm $container-spacer-x-sm; + font-size: $alert-font-size; + } +} diff --git a/components/02-molecules/alert/alert.html b/components/02-molecules/alert/alert.html index 926308bd6..441e47d4a 100644 --- a/components/02-molecules/alert/alert.html +++ b/components/02-molecules/alert/alert.html @@ -1,7 +1,9 @@ -