suite

app/assets/stylesheets/public.scss

@@ -9,17 +9,20 @@
 
 @import "qi_grids";
 
+$first_color:#EAB634;
+
 
 body{
   font-family: Lato, Helvetica, Arial, sans-serif;
-  
+  font-size:15px;
+  background:rgba($first_color, 0.03);
+  color:rgba(0,0,0,0.7);
 }
 
 .row{
   margin:0 !important;
 }
 
-$first_color:#EAB634;
 
 .column_inner{
   .main_center{
@@ -30,6 +33,7 @@ $first_color:#EAB634;
   
 }
 .main_center{
+  max-width:900px;
   margin:auto;
 }
 
@@ -206,3 +210,140 @@ ul{
 
 
 
+
+
+
+@media screen and (max-width: 880px) {
+  #sub_footer {#citation{
+    position:static;
+    width:auto;
+    padding-top:30px;
+    padding-bottom:150px;
+  }
+  
+  
+  
+  #distinctions{
+    position:static;
+    margin:50px 20px;
+    text-align:center;
+  }}
+  
+  .large_centered{
+    padding: 50px 20px;
+    span{font-size:20px !important;}
+  }
+  
+  
+  .shadow_square{
+    height:auto !important;
+    margin:0 !important;
+    margin-bottom:20px !important;
+    
+  }
+  
+  .pictos{
+    display:none;
+  }
+  
+  body{
+    font-size:14px;
+  }
+  .article_large{
+    .img{
+      float:none;
+      width:auto;
+      
+    }
+    
+    .description{
+      margin:auto;
+    }
+    
+  }
+  .article_small{
+    float:none;
+    width:auto;
+  }
+  #sub_footer{
+    background-size:cover;
+    
+  }
+  .p_product{
+    width:inherit;
+    float:none;
+    margin:20px 25px;
+   
+  }
+  .columns{
+    float:none;
+    width:100% !important;
+    box-sizing:border-box;
+    
+  }
+  .product_show{
+    padding:20px;
+    
+    .left_image{
+      float:none;
+      width:100%;
+      
+    }
+    
+    .content{
+      margin:auto;
+    }
+    
+  }
+  
+  .addresses{
+    padding:20px;
+  }
+  
+  #boutique_menu a{
+    
+    font-size:0.75em;
+    width:60px;
+     .step{
+       font-size: 10px;
+           height: 41px;
+           line-height: 41px;
+           width: 41px;
+    
+  }}
+  
+  .price_line_block_recap{
+    font-size:0.8em;
+  }
+
+
+  #header.sub_page #logo, #header.home_page #logo{
+    margin:20px auto;
+    display:block;
+  }
+  
+  .sub_header .inner {
+      padding: 20px 20px;
+    }
+    
+    
+    #header{
+      
+      div{
+        float:none !important;
+      }
+      text-align:center;
+      
+      height:auto !important;
+      h1{
+        padding:30px 0;
+      }
+      div{
+        
+        position:static !important;
+        
+      }
+      
+    }
+}
+

app/views/layouts/public.html.haml

@@ -114,8 +114,7 @@
             =flash[:alert]
     
     #header.with_ratio{:style => "position:relative;background-image:url('#{@img_url}');", :data => {:ratio => 0.30}}
-      %div{:style => "position:absolute;top:0;right:0;left:0;bottom:0;"}
+      
-        %h1.vertical_center=@title
         
         
       #menu_top
@@ -139,6 +138,9 @@
 
       .clear
       
+      %div{:style => "position:absolute;top:0;right:0;left:0;bottom:0;"}
+        %h1.vertical_center=@title
+