Alves: Fix header padding on mobile screens

alves/sass/_extra-child-theme.scss

@@ -149,15 +149,16 @@ blockquote p {
  * Wide Header & Footer
  */
 #masthead {
+	padding-left: 16px;
+	padding-right: 16px;
+	padding-bottom: $spacing_vertical;
 	position: relative;
+	@extend %responsive-alignwide-nested;
 
-	@extend %responsive-alignwide;
-}
-
-#masthead {
-	padding-left: 0;
-	padding-right: 0;
-	padding-bottom: $spacing_vertical;
+	@include media(desktop) {
+		padding-left: 0;
+		padding-right: 0;
+	}
 }
 
 /**

alves/style-rtl.css

@@ -3203,7 +3203,7 @@ img#wpstats {
 	}
 }
 
-.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead {
+.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 	width: 100%;
 	max-width: 100%;
 	margin-right: auto;
@@ -3211,41 +3211,41 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 560px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 560px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 640px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 782px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
-.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
+.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
 	width: calc(100% + 256px);
 	max-width: 100%;
 	margin-right: auto;
@@ -3253,35 +3253,35 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 560px) {
-	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
 		width: calc(calc( 560px - 32px) + 256px);
 		max-width: 100%;
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
 		width: calc(calc( 640px - 32px) + 256px);
 		max-width: 100%;
 	}
 }
 
 @media only screen and (min-width: 782px) {
-	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: 100%;
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: 100%;
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: 100%;
 	}
@@ -3520,13 +3520,17 @@ blockquote p {
  * Wide Header & Footer
  */
 #masthead {
+	padding-right: 16px;
+	padding-left: 16px;
+	padding-bottom: 32px;
 	position: relative;
 }
 
-#masthead {
-	padding-right: 0;
-	padding-left: 0;
-	padding-bottom: 32px;
+@media only screen and (min-width: 1024px) {
+	#masthead {
+		padding-right: 0;
+		padding-left: 0;
+	}
 }
 
 /**

alves/style.css

@@ -3208,7 +3208,7 @@ img#wpstats {
 	}
 }
 
-.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead {
+.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 	width: 100%;
 	max-width: 100%;
 	margin-left: auto;
@@ -3216,41 +3216,41 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 560px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 560px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 640px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 782px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: calc(100% - 32px);
 	}
 }
 
-.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
+.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
 	width: calc(100% + 256px);
 	max-width: 100%;
 	margin-left: auto;
@@ -3258,35 +3258,35 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 560px) {
-	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
 		width: calc(calc( 560px - 32px) + 256px);
 		max-width: 100%;
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
 		width: calc(calc( 640px - 32px) + 256px);
 		max-width: 100%;
 	}
 }
 
 @media only screen and (min-width: 782px) {
-	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: 100%;
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: 100%;
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
+	.entry-content > .alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide, #masthead, .site-footer #footer-widgets, .site-footer #footer-info-wrapper {
 		width: calc(calc( 782px - 32px) + 256px);
 		max-width: 100%;
 	}
@@ -3537,13 +3537,17 @@ blockquote p {
  * Wide Header & Footer
  */
 #masthead {
+	padding-left: 16px;
+	padding-right: 16px;
+	padding-bottom: 32px;
 	position: relative;
 }
 
-#masthead {
-	padding-left: 0;
-	padding-right: 0;
-	padding-bottom: 32px;
+@media only screen and (min-width: 1024px) {
+	#masthead {
+		padding-left: 0;
+		padding-right: 0;
+	}
 }
 
 /**