Fixes #566 Improve display of settings and bulk pages on mobile (#588)

* fix mobile css for setting and bulk pages * more css fixes * css fix quota in mobile * css fix text in label info * fix modal desgin * fix spacing for comparison txt * fix spacing for checkox Co-authored-by: Caspar Green <[email protected]>
wp-media · Jul 15, 2021 · d16d261 · d16d261
1 parent 2a4feb4
commit d16d261
Show file tree

Hide file tree

Showing 10 changed files with 942 additions and 372 deletions.
diff --git a/assets/css/admin.css b/assets/css/admin.css
@@ -1484,3 +1484,62 @@ ul.imagify-datas-details.imagify-datas-details {
 		background: #F4F7F9;
 	}
 }
+@media (max-width: 730px) {
+	.imagify-settings .imagify-documentation-link-box{
+		margin-top: 2em;
+	}
+}
+
+@media (max-width: 782px) {
+	input[type="radio"], input[type="checkbox"] {
+		height: 1.5625rem;
+		width: 1.5625rem;
+		margin: 1px;
+	}
+	[class*="imagify-"] .button-text{
+		font-size: 13px;
+	}
+	.imagify-account-info-col .imagify-settings-section{
+		padding: 0 10px;
+	}
+	.imagify-settings-section{
+		padding: 10px;
+	}
+	.imagify-check-group.imagify-is-scrollable{
+		margin: auto;
+	}
+	.imagify-settings-section .imagify-col,
+	.imagify-col.imagify-col.imagify-shared-with-account-col,
+	.imagify-media-lib-section .imagify-col,
+	.imagify-custom-folders-section .imagify-col,
+	.imagify-shared-with-account-col {
+		width:100%;
+		float: none;
+		padding-right: 0;
+	}
+	.imagify-col.imagify-col.imagify-account-info-col,
+	.imagify-media-lib-section .imagify-account-info-col,
+	.imagify-custom-folders-section .imagify-account-info-col,
+	.imagify-account-info-col{
+		width: 100%;
+		float: none;
+		padding-left: 0;
+		padding-right: 0;
+	}
+	.imagify-lb-text{
+		font-size: 20px;
+	}
+	.imagify-vcenter{
+		-webkit-flex-direction: column;
+		-ms-flex-direction: column;
+		flex-direction: column;
+		-webkit-box-direction: normal;
+		-webkit-box-orient: vertical;
+		-moz-box-direction: normal;
+		-moz-box-orient: vertical;
+		align-items: center;
+	}
+	.imagify-pr2.imagify-pr2{
+		padding-right: 0em;
+	}
+}