Allows multiple rows of footer and improves responsiveness of some footer elements. #39

src/assets/scss/_footer.scss

@@ -19,6 +19,9 @@ footer {
                 margin: 0 calc(4.16666666667% * 2);
                 margin: 0 calc(4.16666666667vw * 2);
             }
+            nav {
+                border: none;
+            }
             .tainacan-side ul,
             .tainacan-side ol {
                 list-style: inside;
@@ -49,6 +52,32 @@ footer {
                     }
                 }
             }
+            .gallery {
+                display: flex;
+                flex-wrap: wrap;
+                max-height: 485px;
+                overflow: hidden;
+                justify-content: flex-start;
+                align-items: flex-start;
+                .gallery-item{
+                    margin: 5px !important;
+                    width: auto !important;
+
+                    img {
+                        border: none !important;
+                    }
+                }
+                .gallery-caption {
+                    display: none;
+                }
+                br{
+                    display: none;
+                }
+            }
+            .image {
+                max-width: 100%;
+                height: auto;
+            }
         }
         .tainacan-footer-info {
             font-size: 0.875rem;

src/assets/scss/_media_query.scss

@@ -144,20 +144,6 @@ footer {
                         margin: 5px 0 0.5em 0;
                     }
                 }
-
-                .gallery{
-                    display: grid;
-                    max-height: 485px;
-                    overflow: hidden;
-                    justify-content: center;
-                    .gallery-item{
-                        margin: 5px 0 !important;
-                    }
-                    br{
-                        display: none;
-                    }
-                }
-
                 &{
                     border-top: 1px solid white;
                 }
@@ -194,7 +180,7 @@ footer {
                         z-index: 1;
                         opacity: 0;
                         &:checked{
-                            &~h6~p, &~h6~div, &~h6~ul, &~h6~img{
+                            &~h6~p, &~h6~div, &~h6~ul, &~h6~img, &~h6~nav, &~h6~form {
                                 margin-top: 0;
                                 max-height: 0;
                                 opacity: 0;
@@ -204,7 +190,7 @@ footer {
                             &~h6{
                                 position: relative;
                                 i:before{
-                                    content: "more";
+                                    content: "plus";
                                     letter-spacing: normal;
                                     position: absolute;
                                     right: 0;
@@ -259,6 +245,7 @@ footer {
                         margin-right: 4.16666666667%;
                         margin-right: 4.16666666667vw;
                         flex-grow: 1;
+                        flex-basis: 18%;
 
                         &:last-child{
                             margin-right: 0;
@@ -297,17 +284,7 @@ footer {
                         .textwidget{
                             max-width: 200px;
                         }
-                        .gallery{
+                
-                            display: grid;
-                            max-height: 485px;
-                            overflow: hidden;
-                            .gallery-item{
-                                margin: 5px 0 !important;
-                            }
-                            br{
-                                display: none;
-                            }
-                        }
                     }
                 }
             }
@@ -354,6 +331,12 @@ footer {
     }
 }
 
+@media only screen and (min-width: 992px) and (max-width: 1280px) {
+    footer ul li.tainacan-side {
+        flex-basis: 24%;
+    }
+}
+
 // 1400px is the maximum the inner cointainer should get, so we 
 // use 1526px - 1 column - 1 column;
 @media only screen and (min-width: 1526px){
@@ -367,6 +350,9 @@ footer {
             padding-left: 2.6rem;
         }
     }
+    footer ul li.tainacan-side {
+        flex-basis: 13%;
+    }
     /* #comments {
         #form-comment{
             textarea {

src/footer.php

@@ -2,11 +2,9 @@
 	<footer class="container-fluid p-4 p-sm-5 mt-5 tainacan-footer <?php echo ('tainacan-footer-' . get_theme_mod( 'tainacan_footer_color', 'dark' )) ?>" style="padding-bottom: 0 !important;">
 		<?php if ( is_active_sidebar( 'tainacan-sidebar-footer' ) ) { ?>
 			<div class="row tainacan-footer-widgets-area">
-				<div class="col-12 col-lg">
+				<ul class="col-12 col-lg pt-3 pb-3 pl-0 pr-0 d-lg-flex flex-wrap justify-content-xs-center mb-md-0">
-					<ul class="pt-3 pb-3 pl-0 pr-0 d-lg-flex justify-content-xs-center mb-md-0">
+					<?php dynamic_sidebar( 'tainacan-sidebar-footer' ); ?>
-						<?php dynamic_sidebar( 'tainacan-sidebar-footer' ); ?>
+				</ul>
-					</ul>
-				</div>
 			</div>
 		<?php } ?>
 		<hr class="bg-scooter"/>

src/functions.php

@@ -263,7 +263,7 @@ function tainacan_widgets_footer_init() {
 	register_sidebar( array(
 		'name'          => __( 'Tainacan Sidebar Footer', 'tainacan-interface' ),
 		'id'            => 'tainacan-sidebar-footer',
-		'before_widget' => '<li class="border-left-0 border-right-0 tainacan-side"><input type="checkbox" checked><i></i>',
+		'before_widget' => '<li class="mb-lg-4 border-left-0 border-right-0 border-bottom-0 tainacan-side"><input type="checkbox" checked><i></i>',
 		'after_widget'  => '</li>',
 		'before_title'  => '<h6 class="text-white font-weight-bold mb-lg-4">',
 		'after_title'   => ' <i class="tainacan-icon mt-0"></i></h6>',