marcus/wpa-superstar-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify mobile layout to maintain desktop structure with full width

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-16 05:53:39 +00:00
parent 060e4fa70a
commit 3a904b1ab9
1 changed files with 15 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
admin/css/wp-allstars-plugins.css
View File

@ -86,94 +86,35 @@
} }
} }
/* Mobile layout - completely revised for consistency */ /* Mobile layout - simplified */
@media screen and (max-width: 782px) { @media screen and (max-width: 782px) {
/* Fix container padding */
.wp-list-table.plugin-install {
padding: 0;
margin: 0;
}
#the-list {
padding: 0;
margin: 0;
}
/* Full-width cards with consistent margins */
.plugin-card { .plugin-card {
width: 100%; width: 100%;
margin: 0 0 16px 0; margin: 0 0 16px 0;
border-radius: 0;
border-left: none;
border-right: none;
} }
/* Card top section */ /* Make sure margins are reset for single column */
.plugin-card-top { .plugin-card:nth-child(odd),
padding: 20px; .plugin-card:nth-child(even) {
min-height: auto; margin: 0 0 16px 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
} }
/* Plugin icon */ /* Action links position adjustment */
.plugin-icon { .action-links {
position: relative; position: relative;
top: auto; top: 0;
left: auto; right: 0;
margin: 0 0 20px 0; margin-top: 1em;
display: block; }
/* Adjust icon and heading alignment */
.plugin-icon {
width: 100px; width: 100px;
height: 100px; height: 100px;
} }
/* Title area */
.name.column-name { .name.column-name {
margin: 0; margin-right: 0;
width: 100%;
text-align: center;
}
.name.column-name h3 {
font-size: 18px;
margin: 0 0 10px 0;
}
/* Action buttons */
.action-links {
position: static;
width: 100%;
margin: 20px 0 0;
}
.plugin-action-buttons {
float: none;
text-align: center;
margin: 0;
display: flex;
justify-content: center;
}
/* Description and other elements */
.plugin-card-bottom {
padding: 15px 20px;
text-align: center;
}
.plugin-card-bottom > div {
width: 100%;
text-align: center;
padding: 5px 0;
}
/* Ensure buttons are full width on small screens */
.plugin-action-buttons .button {
display: block;
text-align: center;
width: 100%;
margin: 10px 0 0;
} }
} }