diff --git a/apps/block_scout_web/assets/css/components/_dashboard-banner.scss b/apps/block_scout_web/assets/css/components/_dashboard-banner.scss index 7735f3a2f5..8a7325ab5f 100644 --- a/apps/block_scout_web/assets/css/components/_dashboard-banner.scss +++ b/apps/block_scout_web/assets/css/components/_dashboard-banner.scss @@ -32,14 +32,13 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa position: absolute; right: 0; - @include media-breakpoint-down(sm) { + @include media-breakpoint-down(md) { display: none; } } } .dashboard-banner { - align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 3rem; @@ -47,14 +46,17 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa z-index: 9; @include media-breakpoint-down(sm) { - align-items: center; - flex-direction: column; + } } .dashboard-banner-network-graph { flex-grow: 1; padding: 15px 0 0 0; + + @include media-breakpoint-down(md) { + padding-top: 20px; + } } .dashboard-banner-chart { @@ -64,13 +66,11 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa position: relative; @include media-breakpoint-down(md) { - margin: 0 0 20px 0; - max-width: 300px; - width: 100%; + margin-bottom: 20px; + max-width: 100%; } > canvas { - // height: 100px; max-height: 100%; max-width: 100%; width: 100%; @@ -136,6 +136,7 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa .dashboard-banner-network-plain-container { align-items: center; + align-self: flex-end; background-color: $dashboard-banner-network-plain-container-background-color; border-top-left-radius: 10px; display: flex; @@ -147,16 +148,21 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa width: 750px; @include media-breakpoint-down(md) { - align-items: flex-start; - flex-direction: column; - margin-left: 30px; - } - - @include media-breakpoint-down(sm) { border-top-right-radius: 10px; - margin: 0; - padding: 15px 0 15px 15px; + height: auto; + justify-content: flex-start; + margin-left: 15px; + margin-top: 30px; + max-width: 100%; + padding: 20px 0 20px 20px; + width: 250px; } + + // @include media-breakpoint-down(sm) { + // border-top-right-radius: 10px; + // margin: 0; + // padding: 15px 0 15px 15px; + // } } .dashboard-banner-network-stats { @@ -165,15 +171,16 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa flex-shrink: 0; grid-template-columns: 1fr 1fr 1fr; + @include media-breakpoint-down(md) { + grid-template-columns: 1fr; + row-gap: 20px; + } + @include stats-item($dashboard-stats-item-border-color, $dashboard-stats-item-label-color, $dashboard-stats-item-value-color); .dashboard-banner-network-stats-item { @include media-breakpoint-down(sm) { - margin-bottom: 25px; - &:last-child { - margin-bottom: 0; - } } } } \ No newline at end of file