Varia: Cleaning up account pages on mobile/tablet views.

varia/sass/vendors/woocommerce/pages/_my-account.scss

@@ -4,7 +4,8 @@
 body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
 
 	.entry-content .woocommerce-MyAccount-navigation {
-		width: 20%;
+
+		width: 100%;
 
 		ul li a {
 			line-height: map-deep-get($config-global, "font", "line-height", "heading");
@@ -14,10 +15,15 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 		& + *:not(:first-child) {
 			margin-top: 0;
 		}
+
+		@include media(tablet) {
+			width: 20%;
+		}
 	}
 
 	.woocommerce-MyAccount-content {
-		width: calc(80% - #{map-deep-get($config-global, "spacing", "horizontal")});
+
+		width: 100%;
 
 		.woocommerce-notices-wrapper:empty {
 			display: none;
@@ -28,6 +34,10 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 			padding: map-deep-get($config-global, "spacing", "unit");
 			border-radius: 3px;
 		}
+
+		@include media(tablet) {
+			width: calc(80% - #{map-deep-get($config-global, "spacing", "horizontal")});
+		}
 	}
 
 	.addresses .title h3 {

varia/style-woocommerce-rtl.css

@@ -1764,7 +1764,7 @@ body[class*="woocommerce"] #page .woocommerce-invalid #terms {
  * Account page
  */
 body[class*="woocommerce"] #page .entry-content .woocommerce-MyAccount-navigation {
-	width: 20%;
+	width: 100%;
 }
 
 body[class*="woocommerce"] #page .entry-content .woocommerce-MyAccount-navigation ul li a {
@@ -1776,8 +1776,14 @@ body[class*="woocommerce"] #page .entry-content .woocommerce-MyAccount-navigatio
 	margin-top: 0;
 }
 
+@media only screen and (min-width: 640px) {
+	body[class*="woocommerce"] #page .entry-content .woocommerce-MyAccount-navigation {
+		width: 20%;
+	}
+}
+
 body[class*="woocommerce"] #page .woocommerce-MyAccount-content {
-	width: calc(80% - 16px);
+	width: 100%;
 }
 
 body[class*="woocommerce"] #page .woocommerce-MyAccount-content .woocommerce-notices-wrapper:empty {
@@ -1790,6 +1796,12 @@ body[class*="woocommerce"] #page .woocommerce-MyAccount-content fieldset {
 	border-radius: 3px;
 }
 
+@media only screen and (min-width: 640px) {
+	body[class*="woocommerce"] #page .woocommerce-MyAccount-content {
+		width: calc(80% - 16px);
+	}
+}
+
 body[class*="woocommerce"] #page .addresses .title h3 {
 	font-size: 1rem;
 }

varia/style-woocommerce.css

@@ -1764,7 +1764,7 @@ body[class*="woocommerce"] #page .woocommerce-invalid #terms {
  * Account page
  */
 body[class*="woocommerce"] #page .entry-content .woocommerce-MyAccount-navigation {
-	width: 20%;
+	width: 100%;
 }
 
 body[class*="woocommerce"] #page .entry-content .woocommerce-MyAccount-navigation ul li a {
@@ -1776,8 +1776,14 @@ body[class*="woocommerce"] #page .entry-content .woocommerce-MyAccount-navigatio
 	margin-top: 0;
 }
 
+@media only screen and (min-width: 640px) {
+	body[class*="woocommerce"] #page .entry-content .woocommerce-MyAccount-navigation {
+		width: 20%;
+	}
+}
+
 body[class*="woocommerce"] #page .woocommerce-MyAccount-content {
-	width: calc(80% - 16px);
+	width: 100%;
 }
 
 body[class*="woocommerce"] #page .woocommerce-MyAccount-content .woocommerce-notices-wrapper:empty {
@@ -1790,6 +1796,12 @@ body[class*="woocommerce"] #page .woocommerce-MyAccount-content fieldset {
 	border-radius: 3px;
 }
 
+@media only screen and (min-width: 640px) {
+	body[class*="woocommerce"] #page .woocommerce-MyAccount-content {
+		width: calc(80% - 16px);
+	}
+}
+
 body[class*="woocommerce"] #page .addresses .title h3 {
 	font-size: 1rem;
 }