boris/ElegantFin
1
0
Fork 0
mirror of https://github.com/lscambo13/ElegantFin.git synced 2025-09-18 12:40:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Responsive Design: Part 2

Browse Source 
Fixes to poster and backdrop cards
Added comments for reference
This commit is contained in:
lscambo13
2025-01-11 07:03:44 -08:00
parent cb9ec0cc39
commit 1cabc5b311
1 changed files with 53 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
Theme/ElegantFin-theme-nightly.css
View File

@@ -214,96 +214,115 @@ html {
.backdropCard, .backdropCard,
.bannerCard { .bannerCard {
width: 46%; width: 46%;
max-width: 18em;
} }
/* @media (min-width: 31.25em) { .portraitCard {
min-width: 5em;
}
/* if the window width is equal to or more than (at minimum) 150em then the code in the query will trigger */
/* 14 posters, 10 thumbs */
@media (min-width: 150em) {
.portraitCard, .portraitCard,
.smallBackdropCard,
.squareCard { .squareCard {
width: 30% !important; width: 6.6% !important;
} }
} */
/* if the window width is equal to or more than (at minimum) 100em then the code in the query will trigger */ .backdropCard {
@media (min-width: 120em) { width: 9.5%;
}
}
/* if the window width is equal to or less than (at maximum) 150em then the code in the query will trigger */
/* 9 posters, 7 thumbs */
@media (max-width: 150em) {
.portraitCard, .portraitCard,
.squareCard { .squareCard {
width: 10.4% !important; width: 10.4% !important;
} }
.backdropCard {
width: 13.6%;
}
} }
/* if the window width is equal to or less than (at maximum) 100em then the code in the query will trigger */ /* 7 posters, 6 thumbs */
@media (max-width: 120em) { @media (max-width: 120em) {
.portraitCard, .portraitCard,
.squareCard { .squareCard {
width: 13.2% !important; width: 13.5% !important;
}
.backdropCard {
width: 15.8%;
} }
} }
/* 6 posters, 5 thumbs */
@media (max-width: 100em) { @media (max-width: 100em) {
.portraitCard, .portraitCard,
.squareCard { .squareCard {
width: 15.2% !important; width: 15.2% !important;
} }
.backdropCard {
width: 18.4%;
}
} }
@media (max-width: 60em) { /* 5 posters, 4 thumbs */
@media (max-width: 62em) {
.portraitCard, .portraitCard,
.squareCard { .squareCard {
width: 17.7% !important; width: 17.9% !important;
}
} }
/* @media (max-width: 50em) { .backdropCard {
width: 23.3%;
}
}
/* 4 posters, 3 thumbs */
@media (max-width: 48.125em) {
.portraitCard, .portraitCard,
.squareCard { .squareCard {
width: 17.7% !important; width: 22.3% !important;
} }
} */
/* @media (max-width: 43.75em) { .backdropCard {
width: 30.7%;
.portraitCard, }
.squareCard {
width: 23% !important;
} }
} */
/* 3 posters, 2 thumbs */
@media (max-width: 30em) { @media (max-width: 30em) {
.portraitCard, .portraitCard,
.squareCard { .squareCard {
width: 28.8% !important; width: 28.8% !important;
} }
.layout-mobile .portraitCard,
.layout-mobile .squareCard {
width: 29.8% !important;
} }
@media (min-width: 25em) {
.backdropCard { .backdropCard {
width: 46%; width: 46%;
} }
} }
@media (min-width: 48.125em) {
.backdropCard {
width: 31%;
}
}
.detailLogo { .detailLogo {
display: none; display: none;
} }
h1 {
/* font-size: 3em; */
}
.detailPageWrapperContainer { .detailPageWrapperContainer {
padding-top: unset; padding-top: unset;
margin-top: unset; margin-top: unset;
@@ -345,12 +364,6 @@ h1 {
background-color: transparent; background-color: transparent;
} }
.portraitCard {
min-width: 5em;
/* width: 29.5%; */
/* max-width: 12.9em; */
}
.headerHomeButton { .headerHomeButton {
display: none; display: none;
} }
@@ -404,6 +417,7 @@ h1 {
.layout-desktop .detailImageContainer .card { .layout-desktop .detailImageContainer .card {
top: unset !important; top: unset !important;
width: 25vw !important;
} }
@media (max-width: 62.5em) { @media (max-width: 62.5em) {