Update mobile layout to single column with desktop styling

This commit is contained in:
Marcus Quinn
2025-03-17 04:33:51 +00:00
parent e8964b3f2b
commit fa1744b892

View File

@ -260,15 +260,23 @@ body.wp-admin .plugin-card .plugin-icon {
} }
} }
/* Small screen styles (standard WordPress breakpoint) - Exact copy of desktop layout */ /* Small screen styles with single column layout but desktop styling */
@media screen and (max-width: 782px) { @media screen and (max-width: 782px) {
/* Copy of desktop card styles */ /* Apply single column layout for mobile */
body.wp-admin .wp-list-table.plugin-install #the-list {
display: flex !important;
flex-wrap: wrap !important;
padding: 0 !important;
margin: 0 !important;
}
/* Keep the same card styling but with full width for single column */
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;
border-radius: 8px !important; border-radius: 8px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
width: 100% !important; width: 100% !important; /* Single column layout */
margin: 0 0 16px 0 !important; margin: 0 0 16px 0 !important; /* No horizontal margins needed */
padding: 0 !important; padding: 0 !important;
box-sizing: border-box !important; box-sizing: border-box !important;
transition: all 0.2s ease !important; transition: all 0.2s ease !important;