Updates:20.02.2020 => немного изменил пример

Ko2doo · Feb 25, 2020 · cff23bc · cff23bc
1 parent e984749
commit cff23bc
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 12 deletions.
diff --git a/app/css/main.css b/app/css/main.css
@@ -490,20 +490,31 @@ button {
   margin-right: 0.9375rem;
   width: -webkit-calc(33.33333% - 1.875rem);
   width: calc(33.33333% - 1.875rem);
+  word-wrap: break-word;
+  padding-left: 0.9375rem;
+  padding-right: 0.9375rem;
 }
 
 .section-hello .col:nth-child(1) {
+  height: 15.625rem;
   background-color: cadetblue;
 }
 
 .section-hello .col:nth-child(2) {
+  height: 20rem;
   background-color: moccasin;
 }
 
 .section-hello .col:nth-child(3) {
+  height: 10rem;
   background-color: darksalmon;
 }
 
+.section-hello .col-txt {
+  margin-top: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
 .section-hello > p:first-child {
   font-size: 1.375em;
   font-weight: 600;
@@ -539,14 +550,6 @@ button {
     width: -webkit-calc(50% - 1.875rem);
     width: calc(50% - 1.875rem);
   }
-
-  .section-hello .col {
-    margin-top: 0.9375rem;
-  }
-
-  .section-hello .col:first-child {
-    margin-top: 0;
-  }
 }
 
 @media screen and (max-width: 36rem) {
@@ -558,4 +561,12 @@ button {
     width: -webkit-calc(100% - 1.875rem);
     width: calc(100% - 1.875rem);
   }
+
+  .section-hello .col {
+    margin-top: 0.9375rem;
+  }
+
+  .section-hello .col:first-child {
+    margin-top: 0;
+  }
 }
diff --git a/app/index.html b/app/index.html
@@ -19,9 +19,15 @@
       <p>hello i am the section!</p>
 
     <div class="section-content">
-      <div class="col">Grid item 1</div>
-      <div class="col">Grid item 2</div>
-      <div class="col">Grid item 3</div>
+      <div class="col">
+        <p class="col-txt">Grid item 1</p>
+      </div>
+      <div class="col">
+        <p class="col-txt">Grid item 2</p>
+      </div>
+      <div class="col">
+        <p class="col-txt">Grid item 3</p>
+      </div>
     </div>
     </section>
   </main>

diff --git a/app/scss/blocks/_section-hello.scss b/app/scss/blocks/_section-hello.scss
@@ -15,8 +15,9 @@
 		@include size(4);
 		@include size-md(6);
 		@include size-sm(12);
+		@include col-padding();
 
-		@include md-block(){
+		@include sm-block(){
 			margin-top: $offset_one_side;
 
 				&:first-child{
@@ -25,15 +26,23 @@
 		}
 
 			&:nth-child(1){
+				height: rem(250);
 				background-color: cadetblue;
 			}
 			&:nth-child(2){
+				height: rem(320);
 				background-color: moccasin;
 			}
 			&:nth-child(3){
+				height: rem(160);
 				background-color: darksalmon;
 			}
 
+			&-txt{
+				margin-top: rem(12);
+				margin-bottom: rem(8);
+			}
+
 	}
 
 	& > p:first-child{