SEAB-6164: resizing and alignment fix for the new landing page (#1907)

* resizing and alignment fix

* codacy

* test

* pr preview

* pr review

src/app/github-landing-page/github-landing-page.component.html

@@ -22,14 +22,14 @@ <h3>Please wait while your GitHub repository installation is being processed. Th
     <hr />
     <h3 class="text-align-center">You can close this tab and return to Dockstore on the original tab.</h3>
 
-    <div class="w-100 cards-container" fxLayout="row" fxLayoutAlign="space-evenly stretch">
-      <mat-card class="landing-page-card">
+    <div class="w-100 cards-container" fxLayoutAlign.lt-lg="center" fxLayout="row wrap" fxLayoutAlign="space-evenly stretch">
+      <mat-card class="landing-page-card" fxFlex.lt-lg="80%" fxFlex="45%">
         <mat-card-header>
           <mat-card-title>Do you have a .dockstore.yml file in your repository?</mat-card-title>
         </mat-card-header>
         <mat-divider></mat-divider>
         <mat-card-content class="h-100 landing-page-card-content">
-          <div class="text-align-center">
+          <div>
             If you haven’t already, please create a <code>.dockstore.yml</code> file in your repository. This way, your workflows will be
             kept up-to-date automatically. <br />
 
@@ -48,14 +48,14 @@ <h3 class="text-align-center">You can close this tab and return to Dockstore on
                 email: &lt;String&gt;
           </pre>
 
-          <div class="landing-page-card-content-text">
+          <div>
             Note: the first line of this file references the version of <code>.dockstore.yml</code> syntax being used, not the version/tag
             of the workflow/tool/service/notebook it describes
           </div>
         </mat-card-content>
       </mat-card>
 
-      <mat-card class="landing-page-card">
+      <mat-card class="landing-page-card" fxFlex.lt-lg="80%" fxFlex="45%">
         <mat-card-header>
           <mat-card-title class="ml-2">Tips and Tricks</mat-card-title>
         </mat-card-header>

src/app/github-landing-page/github-landing-page.component.scss

@@ -3,7 +3,7 @@
 }
 
 .landing-page-card {
-  width: 40%;
+  margin-bottom: 2%;
 }
 
 .header-container {
@@ -22,8 +22,7 @@ mat-divider {
 }
 
 .landing-page-card-content {
-  width: 80%;
-  padding: 0 5%;
+  width: 90%;
   margin: auto;
 }