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

Fix: Increase plugin card padding and improve responsive grid layout

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-24 23:34:18 +00:00
parent 1224937955
commit 6040c1b5bd
1 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
admin/css/wp-allstars-admin.css
View File

@ -1016,16 +1016,25 @@ body.wp-admin .button.pricing-button:hover,
/* Free Plugins grid layout with improved spacing */ /* Free Plugins grid layout with improved spacing */
#recommended .wpa-plugin-container { #recommended .wpa-plugin-container {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: 1fr; /* Default to single column */
gap: 20px; /* Creates vertical and horizontal gaps */ gap: 20px; /* Creates vertical and horizontal gaps */
padding: 0 15px; padding: 0 15px;
margin-top: 15px; margin: 15px auto;
max-width: 800px; /* Fixed max-width to keep centered layout at all breakpoints */
}
/* Switch to 2-column layout on screens wider than 1200px */
@media screen and (min-width: 1200px) {
#recommended .wpa-plugin-container {
grid-template-columns: repeat(2, 1fr);
max-width: 1200px;
}
} }
/* Free Plugins card styling improvements */ /* Free Plugins card styling improvements */
#recommended .plugin-card { #recommended .plugin-card {
box-sizing: border-box; box-sizing: border-box;
padding: 15px 15px 65px; /* Increased bottom padding for compatibility message */ padding: 15px 15px 90px; /* Increased bottom padding for compatibility message + room for buttons */
position: relative; /* For absolute positioning of compatibility message */ position: relative; /* For absolute positioning of compatibility message */
height: 100%; /* Full height to ensure all cards in a row have same height */ height: 100%; /* Full height to ensure all cards in a row have same height */
margin: 0; /* Remove margin since grid takes care of spacing */ margin: 0; /* Remove margin since grid takes care of spacing */