feat: Enhance mobile responsiveness for container and modal styles in main and admin templates
This commit is contained in:
@@ -155,10 +155,12 @@ select:focus {
|
|||||||
|
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
.container {
|
.container {
|
||||||
width: calc(100% - 18px);
|
width: 100%;
|
||||||
padding: 14px;
|
max-width: 100%;
|
||||||
margin: 10px auto;
|
padding: 12px 12px 18px;
|
||||||
border-radius: 10px;
|
margin: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
+11
-8
@@ -3374,9 +3374,12 @@
|
|||||||
|
|
||||||
/* Mobile-responsive styles for user interface */
|
/* Mobile-responsive styles for user interface */
|
||||||
.container {
|
.container {
|
||||||
width: 95% !important;
|
width: 100% !important;
|
||||||
margin: 10px auto !important;
|
max-width: 100% !important;
|
||||||
padding: 15px !important;
|
margin: 0 !important;
|
||||||
|
padding: 12px 12px 18px !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2 {
|
h1, h2 {
|
||||||
@@ -3446,7 +3449,7 @@
|
|||||||
display: grid !important;
|
display: grid !important;
|
||||||
grid-template-columns: 1fr !important;
|
grid-template-columns: 1fr !important;
|
||||||
gap: 15px !important;
|
gap: 15px !important;
|
||||||
padding: 10px 0 !important;
|
padding: 10px 0 0 !important;
|
||||||
overflow-x: visible !important;
|
overflow-x: visible !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -3463,12 +3466,12 @@
|
|||||||
|
|
||||||
/* Modal improvements for mobile */
|
/* Modal improvements for mobile */
|
||||||
.modal-content {
|
.modal-content {
|
||||||
width: 95% !important;
|
width: calc(100vw - 16px) !important;
|
||||||
max-width: 500px !important;
|
max-width: none !important;
|
||||||
margin: 20px auto !important;
|
margin: 8px auto !important;
|
||||||
max-height: 85vh !important;
|
max-height: 85vh !important;
|
||||||
overflow-y: auto !important;
|
overflow-y: auto !important;
|
||||||
padding: 20px !important;
|
padding: 16px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Button improvements */
|
/* Button improvements */
|
||||||
|
|||||||
@@ -1237,9 +1237,11 @@
|
|||||||
|
|
||||||
/* Mobile-responsive styles for admin interface */
|
/* Mobile-responsive styles for admin interface */
|
||||||
.admin-content-container {
|
.admin-content-container {
|
||||||
width: 95% !important;
|
width: 100% !important;
|
||||||
margin: 10px auto !important;
|
max-width: 100% !important;
|
||||||
padding: 15px !important;
|
margin: 0 !important;
|
||||||
|
padding: 12px 12px 18px !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
overflow-x: hidden !important;
|
overflow-x: hidden !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1363,11 +1365,12 @@
|
|||||||
|
|
||||||
/* Modal improvements for admin */
|
/* Modal improvements for admin */
|
||||||
.modal-content {
|
.modal-content {
|
||||||
width: 95% !important;
|
width: calc(100vw - 16px) !important;
|
||||||
max-width: 500px !important;
|
max-width: none !important;
|
||||||
margin: 20px auto !important;
|
margin: 8px auto !important;
|
||||||
max-height: 85vh !important;
|
max-height: 85vh !important;
|
||||||
overflow-y: auto !important;
|
overflow-y: auto !important;
|
||||||
|
padding: 16px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Admin card improvements */
|
/* Admin card improvements */
|
||||||
@@ -1526,9 +1529,11 @@
|
|||||||
/* Mobile-responsive styles for admin interface */
|
/* Mobile-responsive styles for admin interface */
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
.admin-content-container {
|
.admin-content-container {
|
||||||
width: 95% !important;
|
width: 100% !important;
|
||||||
margin: 10px auto !important;
|
max-width: 100% !important;
|
||||||
padding: 15px !important;
|
margin: 0 !important;
|
||||||
|
padding: 12px 12px 18px !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2 {
|
h1, h2 {
|
||||||
@@ -1615,12 +1620,12 @@
|
|||||||
|
|
||||||
/* Modal improvements for admin */
|
/* Modal improvements for admin */
|
||||||
.modal-content {
|
.modal-content {
|
||||||
width: 95% !important;
|
width: calc(100vw - 16px) !important;
|
||||||
max-width: 500px !important;
|
max-width: none !important;
|
||||||
margin: 20px auto !important;
|
margin: 8px auto !important;
|
||||||
max-height: 85vh !important;
|
max-height: 85vh !important;
|
||||||
overflow-y: auto !important;
|
overflow-y: auto !important;
|
||||||
padding: 20px !important;
|
padding: 16px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Button improvements */
|
/* Button improvements */
|
||||||
@@ -1808,9 +1813,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.admin-content-container {
|
.admin-content-container {
|
||||||
width: 95%;
|
width: 100%;
|
||||||
margin: 10px auto;
|
max-width: 100%;
|
||||||
padding: 15px;
|
margin: 0;
|
||||||
|
padding: 12px 12px 18px;
|
||||||
|
box-sizing: border-box;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1824,12 +1831,13 @@
|
|||||||
|
|
||||||
/* Better modal sizing for mobile */
|
/* Better modal sizing for mobile */
|
||||||
.modal-content {
|
.modal-content {
|
||||||
width: 95% !important;
|
width: calc(100vw - 16px) !important;
|
||||||
max-width: none !important;
|
max-width: none !important;
|
||||||
margin: 10px auto !important;
|
margin: 8px auto !important;
|
||||||
max-height: 90vh !important;
|
max-height: 90vh !important;
|
||||||
overflow-y: auto !important;
|
overflow-y: auto !important;
|
||||||
-webkit-overflow-scrolling: touch !important;
|
-webkit-overflow-scrolling: touch !important;
|
||||||
|
padding: 16px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user