Adjust media queries to maintain desktop layout between 1086px and 768px

This commit is contained in:
Marcus Quinn
2025-03-16 18:19:02 +00:00
parent e69f0e382a
commit 4266f37e4d

View File

@ -64,8 +64,26 @@
} }
} }
/* Responsive behavior */ /* Responsive behavior - only change layout below 1086px and above 768px */
@media screen and (max-width: 1260px) { @media screen and (max-width: 1086px) and (min-width: 769px) {
/* Keep the desktop layout in this range */
.plugin-card {
width: calc(50% - 16px);
margin: 0 8px 16px;
}
/* Maintain consistent edge alignment */
.plugin-card:nth-child(even) {
margin-right: 0;
}
.plugin-card:nth-child(odd) {
margin-left: 0;
}
}
/* Full width layout only below 768px */
@media screen and (max-width: 768px) {
.plugin-card { .plugin-card {
width: 100%; width: 100%;
margin: 0 0 16px 0; margin: 0 0 16px 0;
@ -73,7 +91,7 @@
} }
/* Mobile styles - now working with correct positioning */ /* Mobile styles - now working with correct positioning */
@media screen and (max-width: 782px) { @media screen and (max-width: 768px) {
body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card { body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card {
border: 1px solid #dcdcde !important; border: 1px solid #dcdcde !important;
width: 100% !important; width: 100% !important;