Merge pull request #2385 from Automattic/fix/seedlet/footer-menu-alignment

Seedlet: Clean up footer navigation

seedlet/assets/css/ie.css

@@ -4849,14 +4849,6 @@ nav a {
 	overflow: hidden;
 }
 
-@media only screen and (min-width: 822px) {
-	.site-footer {
-		align-items: flex-end;
-		display: flex;
-		flex-wrap: wrap;
-	}
-}
-
 .site-footer > .site-info {
 	color: #333333;
 	font-family: 'Playfair Display', Georgia, Times, serif;
@@ -4913,16 +4905,8 @@ nav a {
 	padding-left: 0;
 }
 
-@media only screen and (min-width: 822px) {
-	.site-footer > .footer-navigation .footer-menu {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: flex-end;
-	}
-}
-
 .site-footer > .footer-navigation .footer-menu > li {
-	display: inline;
+	display: inline-block;
 }
 
 .site-footer > .footer-navigation .footer-menu > li:first-of-type > a {
@@ -4934,7 +4918,7 @@ nav a {
 }
 
 .site-footer > .footer-navigation .footer-menu .menu-item {
-	padding: 13px;
+	padding: 13px 13px 13px 0;
 }
 
 .site-footer > .footer-navigation .footer-menu .menu-item a {

seedlet/assets/sass/components/footer/_footer-branding.scss

@@ -1,14 +1,7 @@
 // Footer
 
 .site-footer {
-
 	overflow: hidden;
-
-	@include media(desktop) {
-		align-items: flex-end;
-		display: flex;
-		flex-wrap: wrap;
-	}
 }
 
 // Footer Branding

seedlet/assets/sass/components/footer/_footer-navigation.scss

@@ -18,14 +18,8 @@
 		margin: 0;
 		padding-left: 0;
 
-		@include media(desktop) {
-			display: flex;
-			flex-wrap: wrap;
-			justify-content: flex-end;
-		}
-
 		& > li {
-			display: inline;
+			display: inline-block;
 
 			&:first-of-type > a {
 				padding-left: 0;
@@ -37,7 +31,7 @@
 		}
 
 		.menu-item {
-			padding: var(--primary-nav--padding);
+			padding: var(--primary-nav--padding) var(--primary-nav--padding) var(--primary-nav--padding) 0;
 
 			a {
 				font-family: var(--primary-nav--font-family);

seedlet/style-rtl.css

@@ -3332,14 +3332,6 @@ nav a {
 	overflow: hidden;
 }
 
-@media only screen and (min-width: 822px) {
-	.site-footer {
-		align-items: flex-end;
-		display: flex;
-		flex-wrap: wrap;
-	}
-}
-
 .site-footer > .site-info {
 	color: var(--footer--color-text);
 	font-family: var(--footer--font-family);
@@ -3392,16 +3384,8 @@ nav a {
 	padding-right: 0;
 }
 
-@media only screen and (min-width: 822px) {
-	.site-footer > .footer-navigation .footer-menu {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: flex-end;
-	}
-}
-
 .site-footer > .footer-navigation .footer-menu > li {
-	display: inline;
+	display: inline-block;
 }
 
 .site-footer > .footer-navigation .footer-menu > li:first-of-type > a {
@@ -3413,7 +3397,7 @@ nav a {
 }
 
 .site-footer > .footer-navigation .footer-menu .menu-item {
-	padding: var(--primary-nav--padding);
+	padding: var(--primary-nav--padding) 0 var(--primary-nav--padding) var(--primary-nav--padding);
 }
 
 .site-footer > .footer-navigation .footer-menu .menu-item a {

seedlet/style.css

@@ -3357,14 +3357,6 @@ nav a {
 	overflow: hidden;
 }
 
-@media only screen and (min-width: 822px) {
-	.site-footer {
-		align-items: flex-end;
-		display: flex;
-		flex-wrap: wrap;
-	}
-}
-
 .site-footer > .site-info {
 	color: var(--footer--color-text);
 	font-family: var(--footer--font-family);
@@ -3417,16 +3409,8 @@ nav a {
 	padding-left: 0;
 }
 
-@media only screen and (min-width: 822px) {
-	.site-footer > .footer-navigation .footer-menu {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: flex-end;
-	}
-}
-
 .site-footer > .footer-navigation .footer-menu > li {
-	display: inline;
+	display: inline-block;
 }
 
 .site-footer > .footer-navigation .footer-menu > li:first-of-type > a {
@@ -3438,7 +3422,7 @@ nav a {
 }
 
 .site-footer > .footer-navigation .footer-menu .menu-item {
-	padding: var(--primary-nav--padding);
+	padding: var(--primary-nav--padding) var(--primary-nav--padding) var(--primary-nav--padding) 0;
 }
 
 .site-footer > .footer-navigation .footer-menu .menu-item a {