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

Drastically simplify layout CSS to fix mobile issues

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-16 05:58:33 +00:00
parent 8559eba7ac
commit d5dc3d0772
1 changed files with 14 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,33 +34,13 @@
padding: 0; padding: 0;
} }
/* Plugin Cards */ /* Plugin Cards - essential layout only */
.plugin-card { .plugin-card {
margin: 0 8px 16px; margin: 0 8px 16px;
width: calc(50% - 16px); width: calc(50% - 16px);
background-color: #fff; background-color: #fff;
border: 1px solid #dcdcde; border: 1px solid #dcdcde;
box-sizing: border-box; box-sizing: border-box;
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 */
@ -72,53 +52,24 @@
margin-left: 0; margin-left: 0;
} }
/* Responsive behavior - single column for all sizes below 1260px */ /* Maintain consistent center gutter at all widths */
@media screen and (min-width: 1600px) {
/* Force equal spacing between all cards */
.plugin-card:nth-child(odd) {
margin-right: 8px;
}
.plugin-card:nth-child(even) {
margin-left: 8px;
}
}
/* 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;
}
/* Mobile fixes to override WordPress defaults */
.plugin-card-top {
display: block;
padding: 20px;
position: relative;
min-height: 135px;
}
.plugin-icon {
position: absolute;
top: 20px;
left: 20px;
width: 128px;
height: 128px;
}
.name.column-name {
margin-left: 148px;
}
.action-links {
position: absolute;
top: 20px;
right: 20px;
}
/* Ensure plugin descriptions are properly displayed */
.plugin-card-bottom {
clear: both;
padding: 12px 20px;
background-color: #f6f7f7;
overflow: hidden;
text-align: left;
}
} }