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

Fix center gutter at wide widths and improve mobile layout

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-16 05:46:43 +00:00
parent 4c82566466
commit 47dacd10eb
1 changed files with 61 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,6 +44,25 @@
position: relative; position: relative;
} }
/* Maintain consistent center gutter at all widths */
@media screen and (min-width: 1600px) {
.plugin-card {
margin: 0 8px 16px;
width: calc(50% - 16px);
}
/* Force equal spacing between all cards */
.plugin-card:nth-child(odd) {
margin-left: 0;
margin-right: 8px;
}
.plugin-card:nth-child(even) {
margin-left: 8px;
margin-right: 0;
}
}
/* Ensure the right edge aligns with the navigation above */ /* Ensure the right edge aligns with the navigation above */
.plugin-card:nth-child(even) { .plugin-card:nth-child(even) {
margin-right: 0; margin-right: 0;
@ -53,13 +72,55 @@
margin-left: 0; margin-left: 0;
} }
/* Responsive behavior */
@media screen and (max-width: 1260px) { @media screen and (max-width: 1260px) {
.plugin-card { .plugin-card {
width: 100%; width: 100%;
margin: 0 0 16px 0; margin: 0 0 16px 0;
} }
/* Reset the specific margin styles for single column */
.plugin-card:nth-child(odd),
.plugin-card:nth-child(even) {
margin: 0 0 16px 0;
}
} }
/* Improved mobile layout below 768px */
@media screen and (max-width: 782px) {
.plugin-card-top {
padding: 16px;
min-height: auto;
}
.plugin-icon {
position: relative;
top: 0;
left: 0;
margin: 0 auto 16px;
display: block;
}
.name.column-name {
margin-right: 0;
margin-left: 0;
text-align: center;
}
.action-links {
position: static;
width: 100%;
margin: 16px 0 0;
}
.plugin-action-buttons {
float: none;
text-align: center;
margin: 16px 0 0;
}
}
.plugin-card:hover { .plugin-card:hover {
border-color: #999; border-color: #999;
} }