Responsive images in sede.

content/sede/contents+en.lr

@@ -2,9 +2,9 @@ title: Piazza della Libertà
 ---
 body:
 
-<div class="row mb-4 col-md-8 mx-auto">
-<img class="img-fluid col-6" src="ingresso_laterale.jpg" width="400px" alt="Ingresso laterale">
-<img class="img-fluid col-6" src="ingresso.jpg" width="400px" alt="Ingresso principale">
+<div class="text-center float-xl-right">
+ <img src="ingresso_laterale.jpg" alt="Side entrance" class="img-flowing rounded m-1">
+ <img src="ingresso.jpg" alt="Main entrance" class="img-flowing rounded m-1">
 </div>
 
 Our base is in Piazza della Libertà 5/B, in the ZKB Starter's rooms, an initiative organized by ZKB Bank for startups. In the building we have two offices, one for 3D printing and electronics, and another one with computers and books, where chat is welcome.

content/sede/contents.lr

@@ -2,9 +2,9 @@ title: Piazza della Libertà
 ---
 body:
 
-<div class="row mb-4 col-md-8 mx-auto">
-<img class="img-fluid col-6" src="ingresso_laterale.jpg" width="400px" alt="Ingresso laterale">
-<img class="img-fluid col-6" src="ingresso.jpg" width="400px" alt="Ingresso principale">
+<div class="text-center float-xl-right">
+ <img src="ingresso_laterale.jpg" alt="Ingresso laterale" class="img-flowing rounded m-1">
+ <img src="ingresso.jpg" alt="Ingresso principale" class="img-flowing rounded m-1">
 </div>
 
 La nostra sede è in piazza della Libertà 5/B, negli spazi di ZKB Starter, iniziativa della Banca ZKB per startup. All'interno abbiamo due uffici, uno per stampa 3D ed elettronica, l'altro con computer e libri dove si può chiacchierare tranquillamente.

webpack/scss/mlab.scss

@@ -155,6 +155,13 @@ html, body {
  position: fixed;
  @include _pos-top-left;
  }
+
+ .float#{$infix}-right {
+ float: right !important;
+ }
+ .float#{$infix}-left {
+ float: left !important;
+ }
  }
 }
 
@@ -168,3 +175,30 @@ html, body {
  min-width: 20rem;
  }
 }
+
+
+
+.img-flowing {
+ // This must come before the media breakpoints
+ width: 20rem;
+}
+
+@include media-breakpoint-down(md) {
+ .img-flowing {
+ width: auto;
+ max-width: 33%;
+ }
+}
+
+@include media-breakpoint-down(lg) {
+ .img-flowing {
+ width: 10rem;
+ }
+}
+
+
+@include media-breakpoint-down(xl) {
+ .img-flowing {
+ width: 15rem;
+ }
+}
\ No newline at end of file