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

Add stronger CSS overrides with !important to force desktop layout on mobile

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-16 06:02:45 +00:00
parent f0da1e1522
commit 3669a33d61
1 changed files with 52 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -72,51 +72,75 @@
} }
} }
/* Explicit mobile styling to match desktop */ /* Force mobile styling to match desktop layout exactly */
@media screen and (max-width: 782px) { @media screen and (max-width: 782px) {
/* Preserve the core plugin card layout on mobile */ /* Override WordPress mobile styles with !important */
.plugin-card { .plugin-card {
width: 100%; width: 100% !important;
margin: 0 0 16px 0; margin: 0 0 16px 0 !important;
display: block; display: block !important;
position: relative; position: relative !important;
box-sizing: border-box; text-align: left !important;
} }
/* Ensure plugin card top layout */ /* Ensure plugin card top has desktop-like structure */
.plugin-card-top { .plugin-card-top {
padding: 20px; padding: 20px !important;
position: relative; position: relative !important;
min-height: 135px; min-height: 135px !important;
text-align: left !important;
display: block !important;
flex-direction: unset !important;
align-items: unset !important;
} }
/* Plugin icon - absolute position like desktop */ /* Force icon to left side */
.plugin-icon { .plugin-icon {
position: absolute; position: absolute !important;
top: 20px; top: 20px !important;
left: 20px; left: 20px !important;
width: 128px; width: 128px !important;
height: 128px; height: 128px !important;
margin: 0 !important;
display: inline-block !important;
} }
/* Plugin name - proper margin like desktop */ /* Force plugin name to appear next to icon */
.name.column-name { .name.column-name {
margin-left: 148px; margin-left: 148px !important;
margin-right: 0 !important;
width: auto !important;
text-align: left !important;
} }
/* Action links - absolute position like desktop */ .name.column-name h3 {
text-align: left !important;
margin: 0 0 12px !important;
}
/* Force action links position */
.action-links { .action-links {
position: absolute; position: absolute !important;
top: 20px; top: 20px !important;
right: 20px; right: 20px !important;
width: auto !important;
margin: 0 !important;
} }
/* Plugin card bottom - standard styling */ .plugin-action-buttons {
float: right !important;
margin: 0 !important;
text-align: right !important;
display: block !important;
}
/* Force card bottom styling */
.plugin-card-bottom { .plugin-card-bottom {
clear: both; clear: both !important;
padding: 12px 20px; padding: 12px 20px !important;
background-color: #f6f7f7; background-color: #f6f7f7 !important;
overflow: hidden; overflow: hidden !important;
text-align: left !important;
} }
} }