well looking also in desktop

Vizzuality · Dec 14, 2015 · c15a209 · c15a209
1 parent 915f457
commit c15a209
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 21 deletions.
diff --git a/app/assets/stylesheets/layouts/_application.scss b/app/assets/stylesheets/layouts/_application.scss
@@ -620,15 +620,22 @@ $main-slider-height-mb: 300px;
         min-height: 400px;
         align-items: flex-start;
       }
+
+      img {
+        max-width: 100%;
+        width: auto;
+      }
     }
 
     &.-right {
       justify-content: flex-end;
     }
 
     img {
-      max-width: 100%;
+      // max-width: 100%;
+      width: 100%;
     }
+
   }
 
   @media screen and (max-width: $br-mobile) {
@@ -653,14 +660,15 @@ $main-slider-height-mb: 300px;
 
         //This wrapper is to avoid img deformation 
         //into flex container
-        .wrap {
+        .wrap-img {
           overflow: hidden;
         }
       }
     }
   }
 
   .description-container {
+    margin-right: 20px;
 
     @media screen and (max-width: $br-mobile) {
       display: flex;
@@ -669,6 +677,7 @@ $main-slider-height-mb: 300px;
       align-items: center;
       margin-top: 50px;
       margin-bottom: 25px;
+      margin-left: 0;
 
       .title {
         text-align: center;
@@ -918,8 +927,9 @@ $main-slider-height-mb: 300px;
   strong{
     font-weight: 500;
   }
+
   img{
-    max-width: 100%;
+    width: 100%;
   }
 
 

diff --git a/app/assets/stylesheets/modules/home/_features-slider.scss b/app/assets/stylesheets/modules/home/_features-slider.scss
@@ -110,6 +110,7 @@ $slider-height-mb: 550px;
   .col > .col-container {
     position: absolute;
     top: 0;
+    right: 0;
     bottom: 0;
     width: 100%;
     padding: 30px;

diff --git a/app/assets/stylesheets/modules/home/_features.scss b/app/assets/stylesheets/modules/home/_features.scss
@@ -9,7 +9,7 @@
 
       .translated-image {
         width: 150%;
-        transform: translate(10%, 0);
+        transform: translate(20%, 0);
       }
     }
   }
@@ -61,18 +61,20 @@
     }
 
     .image-compare {
-      @media screen and (max-width: $br-mobile) {
+
         display: none;
-      }
+
     }
-
-    .feature-content {
-      display: flex;
-      flex-direction: column;
-
-      .col.-c6 {
+
+    @media screen and (max-width: $br-mobile) {
+      .feature-content {
         display: flex;
-        order: 2;
+        flex-direction: column;
+
+        .col.-c6 {
+          display: flex;
+          order: 2;
+        }
       }
     }
   }

diff --git a/app/views/home/index.html.slim b/app/views/home/index.html.slim
@@ -140,9 +140,8 @@
           /         use (xlink:href="#shape-stay-informed" xmlns:xlink="http://www.w3.org/1999/xlink")
           /     h3 Stay informed
   .m-features
-    .inner
       section.feature-section.-intro
-        .feature-content
+        .feature-content.inner
           .col.-c4
             .col-container
               .description-container
@@ -156,7 +155,7 @@
               = image_tag("home/features/img-info.png")
 
       section.feature-section.-map
-        .feature-content.-right
+        .feature-content.-right.inner
           .col.-c4
             .col-container
               .description-container
@@ -171,7 +170,7 @@
 
 
       section.feature-section.-country-profiles
-        .feature-content
+        .feature-content.inner
           .col.-c4
             .col-container
               .description-container
@@ -184,13 +183,13 @@
                 .link-container
                   a (href="/countries" class="btn medium blue") Country profiles
           .col.-c6.overlap-image
-            .wrap
+            .wrap-img
               = image_tag("home/features/img-profiles.png")
 
       section.feature-section.-compare-countries
-        .feature-content
+        .feature-content.inner
           .col.-c6.overlap-image
-            .wrap
+            .wrap-img
               = image_tag("home/features/img-compare.png")
           .col.-c4
             .col-container
@@ -206,7 +205,7 @@
                   a(href="/compare-countries" class="btn medium blue") Compare countries
 
       section.feature-section.-pantropical
-        .feature-content
+        .feature-content.inner
           .col.-c4
             .col-container
               .description-container