fixes mobile issues

tesar-tech · Jul 21, 2023 · 7e52317 · 7e52317
1 parent fb2523a
commit 7e52317
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git a/BlazorAndTailwind/Pages/Index.razor b/BlazorAndTailwind/Pages/Index.razor
@@ -2,8 +2,5 @@
 
 <PageTitle>Index</PageTitle>
 
-<h1 class="bg-green-500 hover:text-amber-300 text-lg hover:text-2xl">Hello, world!</h1>
+<h1 class="bg-green-500 rounded-xl px-3 py-2 hover:text-amber-300 text-lg hover:text-2xl">Hello, world!</h1>
 
-Welcome to your new app.
-
-<SurveyPrompt Title="How is Blazor working for you?" />
diff --git a/BlazorAndTailwind/Shared/MainLayout.razor b/BlazorAndTailwind/Shared/MainLayout.razor
@@ -1,7 +1,7 @@
 @inherits LayoutComponentBase
 
-<div class="h-screen flex">
-    <div class="min-w-max bg-gradient-to-b from-slate-800 to-red-950 shadow-md">
+<div class="h-screen flex flex-col sm:flex-row">
+    <div class="sm:min-w-max bg-gradient-to-b from-slate-800 to-red-950 shadow-md">
         <NavMenu />
     </div>
 
@@ -14,7 +14,7 @@
             </a>
         </div>
 
-        <article class=" p-4">
+        <article class=" p-4 min-h-screen">
             @Body
         </article>
     </main>

diff --git a/BlazorAndTailwind/wwwroot/css/app.min.css b/BlazorAndTailwind/wwwroot/css/app.min.css
@@ -1544,6 +1544,10 @@ video {
   height:3.5rem
 }
 
+.min-h-screen{
+  min-height:100vh
+}
+
 .w-6{
   width:1.5rem
 }
@@ -1595,6 +1599,10 @@ video {
   list-style-type:disc
 }
 
+.flex-row{
+  flex-direction:row
+}
+
 .flex-col{
   flex-direction:column
 }
@@ -1942,6 +1950,19 @@ a, .btn-link {
     display:none
   }
 
+  .sm\:min-w-max{
+    min-width:-moz-max-content;
+    min-width:max-content
+  }
+
+  .sm\:flex-row{
+    flex-direction:row
+  }
+
+  .sm\:flex-col{
+    flex-direction:column
+  }
+
   .sm\:bg-orange-400{
     --tw-bg-opacity:1;
     background-color:rgb(251 146 60 / var(--tw-bg-opacity))