Fix oppia#5755: Added padding to cards to fix alignment issue on mobi…

…le view (oppia#5968) * Fixed alignment of cards in mobile view * aligned header with cards * added support for small devices
quantumferret · Dec 30, 2018 · ba37cc9 · ba37cc9
1 parent b25965c
commit ba37cc9
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/core/templates/dev/head/pages/library/library.html b/core/templates/dev/head/pages/library/library.html
@@ -95,7 +95,7 @@ <h2 class="oppia-library-h2" translate="I18N_LIBRARY_SUB_HEADER"></h2>
           </div>
 
           <div class="oppia-library-group" ng-repeat="group in libraryGroups track by $index" ng-mouseenter="setActiveGroup($index)" ng-mouseleave="clearActiveGroup()">
-            <div class="row oppia-library-group-header-container">
+            <div class="oppia-library-group-header-container">
               <h2 ng-class="{'active': activeGroupIndex === $index}" class="oppia-library-group-header">
                 <a ng-if="group.has_full_results_page" class="protractor-test-library-<[group.protractor_id]>" ng-click="showFullResultsPage(group.categories, group.full_results_url)" tabindex="0">
                   <span translate="<[group.header_i18n_id]>"></span>
@@ -240,6 +240,7 @@ <h2 ng-class="{'active': activeGroupIndex === $index}" class="oppia-library-grou
     }
     .oppia-library-group-header-container {
       max-width: 928px;
+      margin: 0 -15px 0 0;
       min-width: 315px;
       width: calc(100% - 120px);
       width: -moz-calc(100% - 120px);
@@ -275,6 +276,11 @@ <h2 ng-class="{'active': activeGroupIndex === $index}" class="oppia-library-grou
         width: calc(80% - 120px);
       }
     }
+    @media(max-width: 390px) {
+      .oppia-library-group-header {
+        margin-left: 11.25%;
+      }
+    }
     .oppia-library-group-header a, .oppia-library-group-header span {
       color: inherit;
       font-family: "Capriola", "Roboto", Arial, sans-serif;