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) {
/* 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 {
width: 100%;
margin: 0 0 16px 0;
border-radius: 0;
border-left: none;
border-right: none;
}
/* Card top section */
.plugin-card-top {
padding: 20px;
min-height: auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
/* Make sure margins are reset for single column */
.plugin-card:nth-child(odd),
.plugin-card:nth-child(even) {
margin: 0 0 16px 0;
}
/* Plugin icon */
.plugin-icon {
/* Action links position adjustment */
.action-links {
position: relative;
top: auto;
left: auto;
margin: 0 0 20px 0;
display: block;
top: 0;
right: 0;
margin-top: 1em;
}
/* Adjust icon and heading alignment */
.plugin-icon {
width: 100px;
height: 100px;
}
/* Title area */
.name.column-name {
margin: 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;
margin-right: 0;
}
}