#1898

web/themes/custom/popsu/partials/header.html.twig

@@ -1,9 +1,9 @@
 <header role="banner" class="columns small-12">
     <section id="header-top" class="row align-middle">
-      <div id="header-top-left" class="columns medium-4 small-3">
+      <div id="header-top-left" class="columns medium-4 small-4">
         {{ page.header_top_left }}
       </div>
-      <div id="header-top-middle" class="columns small-7">
+      <div id="header-top-middle" class="columns medium-7 small-6">
         {{ page.header_top_middle }}
       </div>
       <div id="header-top-right" class="columns small-1">

web/themes/custom/popsu/sass/pages/_home.scss

@@ -549,6 +549,9 @@
 		// background: center / 45% no-repeat url(../images/POPSU_1.svg) white;
 		img{
 			width: 45%;
+			@include breakpoint(small down) {
+				width: 100%;
+			}
 		}
 		&:hover{
 			background: $col-1;
@@ -562,6 +565,9 @@
 		// background: center / 45% no-repeat url(../images/POPSU_2.svg) white;
 		img{
 			width: 45%;
+			@include breakpoint(small down) {
+				width: 100%;
+			}
 		}
 		
 		&:hover{
@@ -575,6 +581,9 @@
 		// background: center / 50% no-repeat url(../images/POPSU_Europe.svg) white;
 		img{
 			width: 45%;
+			@include breakpoint(small down) {
+				width: 100%;
+			}
 		}
 		&:hover{
 			background: $col-eur;
@@ -587,6 +596,9 @@
 		// background: center / 50% no-repeat url(../images/POPSU_Europe.svg) white;
 		img{
 			width: 45%;
+			@include breakpoint(small down) {
+				width: 100%;
+			}
 		}
 		&:hover{
 			background: $col-1;
@@ -599,6 +611,9 @@
 		// background: center / 45% no-repeat url(../images/POPSU_monde.svg) white;
 		img{
 			width: 46%;
+			@include breakpoint(small down) {
+				width: 100%;
+			}
 		}
 		&:hover{
 			background: $col-mond;
@@ -611,6 +626,9 @@
 		// background: center / 45% no-repeat url(../images/POPSU_territoires.svg) white;
 		img{
 			width: 45%;
+			@include breakpoint(small down) {
+				width: 100%;
+			}
 		}
 		&:hover{
 			background: $col-ter;
@@ -623,6 +641,9 @@
 		// background: center / 45% no-repeat url(../images/POPSU_metropoles.svg) white;
 		img{
 			width: 45%;
+			@include breakpoint(small down) {
+				width: 100%;
+			}
 		}
 		&:hover{
 			background: $col-met;

web/themes/custom/popsu/sass/pages/partials/_header_footer.scss

@@ -156,6 +156,9 @@
 		color: transparent;
 		background: left / contain no-repeat url(../../images/POPSU_logo.svg);
 	}
+	@include breakpoint(small down) {
+		grid-template-columns: 1fr 1fr;
+	}
 }
 
 .header_top_middle_container{