From da9a356566742175f4ab809f9f3a288ab482ad3a Mon Sep 17 00:00:00 2001
From: jorge-vitrubio <jorge@vitrubio.net>
Date: Tue, 26 Jul 2022 13:31:55 +0200
Subject: [PATCH] adapted footer to small screens

---
 footer.php | 45 ++++++++++++++++++++++-----------------------
 style.css  | 29 +++++++++++++++++++++++++----
 2 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/footer.php b/footer.php
index 633e13a..49fad02 100644
--- a/footer.php
+++ b/footer.php
@@ -17,37 +17,36 @@
 <div id="footer" role="contentinfo">
 	<main class="wrapfooter">
 
-		<p class="col logo">
+		<div class="col logo">
 			<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php echo get_template_directory_uri(). '/images/logogris.png'; ?>" width="105" height="40" alt="Hangar org" /></a>
-		</p>
-		<p class="col org">
-			Fundació AAVC Hangar<br />
-			Emilia Coranty 16<br />
-			08018 Barcelona Espanya<br />
-			CIF: G-63157655<br />
-		</p>
-		<p class="col tels">
-			Tel.+34 93 308 4041<br />
-			Fax +34 93 307 1211<br />
-			info(at)hangar.org<br />
-		</p>
-		<p class="col inf">
+		</div>
+		<div class="col org">
+			<p>Fundació AAVC Hangar</p>
+			<p>Emilia Coranty 16</p>
+			<p>08018 Barcelona Espanya</p>
+			<p>CIF: G-63157655</p>
+		</div>
+		<div class="col tels">
+			<p>Tel.+34 93 308 4041</p>
+			<p>Fax +34 93 307 1211</p>
+			<p>info(at)hangar.org</p>
+		</div>
+		<div class="col inf">
 			<?php _e( '
 			  [:en]Office: Monday to Thursday from 10&nbsp;am to 2&nbsp;pm and from 4&nbsp;pm to 6&nbsp;pm. Friday from 10&nbsp;am to 2&nbsp;pm.[:]
 				[:es]Oficina: de lunes a jueves de 10 a 14&nbsp;h y de 16 a 18&nbsp;h. Viernes de 10 a 14&nbsp;h.[:]
 				[:ca]Oficina: dilluns a dijous de 10 a 14&nbsp;h i de 16 a 18&nbsp;h. Divendres de 10 a 14&nbsp;h.[:]
 				' ); ?>
-		</p>
+		</div>
 		<!-- <p class="col legal">
 		</p> -->
-		<p class="alignright credits">
-			<a href="https://wordpress.org/">Powered by Wordpress</a><br />
-			<?php _e( 'Original Design:', 'hangar' ); ?><a href="https://folchstudio.com/">Folch Studio</a><br />
-			<?php _e( 'Original Development:', 'hangar' ); ?> <a href="https://www.enfusion.es/">Enfusión</a>
-			<?php _e( 'Development and design:', 'hangar' ); ?> <a href="https://git.hangar.org/">Hangar</a>
-			<br />
-			<a href="<?php echo get_permalink(275); ?>"><?php _e( 'Legal advice', 'hangar' ); ?></a><br />
-		</p>
+		<div class="alignright credits">
+			<p><a href="https://wordpress.org/">Powered by Wordpress</a></p>
+			<p><?php _e( 'Original Design:', 'hangar' ); ?><a href="https://folchstudio.com/">Folch Studio</a></p>
+			<p><?php _e( 'Original Development:', 'hangar' ); ?> <a href="https://www.enfusion.es/">Enfusión</a></p>
+			<p><?php _e( 'Development and design:', 'hangar' ); ?> <a href="https://git.hangar.org/">Hangar</a></p>
+			<p><a href="<?php echo get_permalink(275); ?>"><?php _e( 'Legal advice', 'hangar' ); ?></a></p>
+		</div>
 
 	</div><!-- .fwrapfooter -->
 </div><!-- #footer -->
diff --git a/style.css b/style.css
index 30cf08b..c210c8b 100644
--- a/style.css
+++ b/style.css
@@ -1163,11 +1163,32 @@ form#commentform p.form-submit input#submit {
 }
 .center {text-align:center;}
 /* .col {float: left; } */
-.logo { width:140px; margin:0;}
-.org,.tels,.inf,.legal,.credits {
-	width: calc((100% - 140px)/5)
+.wrapfooter .logo, .wrapfooter .org, .wrapfooter .wrapfooter  .tels, .wrapfooter .inf,.wrapfooter  .legal,.wrapfooter  .credits {
+	width: 100%;
+	padding:1rem 0;
 }
-.credits a{color: #A3A7A5!important;}
+.wrapfooter .credits a{color: #A3A7A5!important;}
+@media screen and (max-width:768px) {
+	.wrapfooter{
+		width: 100vw;
+		flex-direction: column;
+	}
+}
+@media screen and (min-width:768px) {
+	.wrapfooter{
+		flex-direction: row;
+	}
+	.wrapfooter .logo {
+		width:140px;
+		margin:0;
+		padding:0;
+		}
+	.wrapfooter .org, .wrapfooter .wrapfooter  .tels, .wrapfooter .inf,.wrapfooter  .legal,.wrapfooter  .credits {
+		width: calc((100% - 140px)/5);
+		padding:0;
+	}
+}
+
 
 /* .center {text-align:center;}
 .col {float: left; }