]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
projects / thirdparty / foundation / foundation-sites.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 864f469)
Update the test case with better grid styling 10261/head
authorharry <harmanmanchanda182@gmail.com>
Mon, 26 Jun 2017 20:48:07 +0000 (02:18 +0530)
committerharry <harmanmanchanda182@gmail.com>
Mon, 26 Jun 2017 20:48:07 +0000 (02:18 +0530)
Also added a alert to resize window to know difference!

test/visual/xy-grid/containers.html patch | blob | blame | history

diff --git a/test/visual/xy-grid/containers.html b/test/visual/xy-grid/containers.html
index 1e6846a8adc4a604104d15b3e87b6782263dc96b..05070a1946895904667d93842194a7584e9e95d4 100644 (file)
--- a/test/visual/xy-grid/containers.html
+++ b/test/visual/xy-grid/containers.html
@@ -10,37 +10,49 @@
     <style>
       .demo {
         background: #1779ba;
+        color: white;
+        text-align: center;
       }
 
       .cell {
         /*background: dodgerblue;*/
         line-height: 50px;
         height: 50px;
-        color: white;
-        text-align: center;
         margin-bottom: 30px;
       }
     </style>
   </head>
   <body>
-    <h1>Grid Container</h1>
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell">
+          <h1>Grid Container</h1>
 
-    <h2>With no `grid-container-padding` should be flush below 1200px, and bounded and centered above</h2>
+          <div class="primary callout">
+            <p>Resize the window to know the difference!</p>
+          </div>
 
-    <div class="grid-container">
-      <div class="grid-x grid-margin-x">
-        <div class="cell medium-12"><div class="demo">12/12</div></div>
-      </div>
-    </div>
+          <h4>With no `grid-container-padding` should be flush below 1200px, and bounded and centered above</h4>
+
+          <div class="grid-container">
+            <div class="grid-x grid-margin-x">
+              <div class="cell medium-12"><div class="demo">12/12</div></div>
+            </div>
+          </div>
 
-    <h2>With `grid-container-padded` should have padding below 1200px, corresponding to responsive gutters</h2>
+          <h4>With `grid-container-padded` should have padding below 1200px, corresponding to responsive gutters</h4>
+
+          <div class="grid-container grid-container-padded">
+            <div class="grid-x grid-margin-x">
+              <div class="cell medium-12"><div class="demo">12/12</div></div>
+            </div>
+          </div>
+        </div>
+        
 
-    <div class="grid-container grid-container-padded">
-      <div class="grid-x grid-margin-x">
-        <div class="cell medium-12"><div class="demo">12/12</div></div>
       </div>
     </div>
-
+    
 
     <script src="../assets/js/vendor.js"></script>
     <script src="../assets/js/foundation.js"></script>
Mirror of https://github.com/foundation/foundation-sites.git