schmidt1024/kashilo
1
0
Fork 0
Code Issues Pull Requests Releases Activity

improve listing

Browse Source
This commit is contained in:
Schmidt
2026-02-01 10:47:29 +01:00
parent 87b1185623
commit 43a905c027
3 changed files with 28 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
css/components.css
View File

@@ -149,40 +149,22 @@
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
.grid-cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.grid-cols-4, .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-2 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.grid-cols-4, .grid-cols-3, .grid-cols-2 { grid-template-columns: 1fr; }
}
/* Listings Grid - responsive 2/3/4/5 columns */
/* Listings Grid - responsive columns */
.listings-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(4, 1fr);
gap: var(--space-md);
}
@media (min-width: 640px) {
@media (max-width: 768px) {
.listings-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 900px) {
.listings-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1200px) {
.listings-grid {
grid-template-columns: repeat(5, 1fr);
grid-template-columns: repeat(2, 1fr);
}
}
@@ -285,28 +267,28 @@ app-header .btn-profile {
app-header .btn-login-text,
app-header .btn-profile-text {
display: none;
display: inline;
}
@media (min-width: 480px) {
@media (max-width: 768px) {
app-header .btn-create {
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
padding: var(--space-sm);
border-radius: var(--radius-full);
}
app-header .btn-create-text {
display: inline;
display: none;
}
app-header .btn-login,
app-header .btn-profile {
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
padding: var(--space-sm);
border-radius: var(--radius-full);
}
app-header .btn-login-text,
app-header .btn-profile-text {
display: inline;
display: none;
}
}