show banner on mobile, keep content centered and reduce pill content …

…spillage
SteeltoeOSS · Sep 4, 2024 · 4ac8ce3 · 4ac8ce3
1 parent 751305d
commit 4ac8ce3
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 12 deletions.
diff --git a/src/Client/Components/Banner.razor b/src/Client/Components/Banner.razor
@@ -1,13 +1,11 @@
 <div class="banner">
 	<Href href="@Href" NewWindow="@NewWindow">
-		<div class="row no-gutters align-items-center">
-			<div class="col-2" style="margin: .7% 3% .7% 5%;max-width: 11%;">
-				<div class="sign rounded-pill special-link">
-				<div style="padding: 2px;">@BannerTypeName</div>
-			</div>
-			</div>
+		<div class="row no-gutters text-center" style="padding: 1% 0">
 			<div class="col desc">
-				@ChildContent
+                <div class="sign rounded-pill special-link text-center" style="min-width:125px;max-width:200px;display:inline-block;margin:10px;">
+                    <div style="padding: 4px 4px 0 4px;">@BannerTypeName</div>
+                </div>
+                @ChildContent
 			</div>
 		</div>
 	</Href>

diff --git a/src/Client/wwwroot/css/mobile.css b/src/Client/wwwroot/css/mobile.css
@@ -1,4 +1,4 @@
-@media (max-width: 576px) {
+@media (max-width: 576px) {
     .width-90 {
         max-width: 97%;
     }
@@ -100,10 +100,6 @@
         padding-right: 15px;
     }
 
-    .banner {
-        display: none;
-    }
-
     .docs-nav-col {
         top: 231px;
         width: 180px;