Antoine/carhop__dynamiques-theme__PROD-DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

RESPONSIVE FIX refining responsivity

Browse Source
This commit is contained in:
Nonimart 2025-09-16 14:01:44 +02:00
parent a74cf0af10
commit 8211ba7a6b
1 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
resources/css/components/post-header.css
View File

@ -1,5 +1,5 @@
.post-header {
@apply bg-primary text-white py-32;
@apply bg-primary text-white py-32 px-2 lg:px-4 md:px-8;
h1.post-header__title,
h2.post-header__title {
@ -7,10 +7,13 @@
line-height: 1.2;
}
&__inner {
@apply container mx-auto grid gap-24;
@apply mx-auto grid gap-24;
@screen xl {
@apply container;
}
&--has-thumbnail {
@screen lg {
grid-template-columns: 1fr 4fr;
grid-template-columns: 4fr 1fr;
}
}
&--no-thumbnail {
@ -21,9 +24,14 @@
@apply bg-white text-primary;
}
.thumbnail-wrapper {
@apply order-2 lg:order-1 relative z-20;
aspect-ratio: 4/5;
@apply order-2 lg:order-1 relative z-20 h-fit;
padding: 1.2rem;
/* max-width: calc(70% - 40px);
@apply mx-auto; */
@screen lg {
transform: translateX(-40px);
}
&:before {
content: '';
@ -31,8 +39,9 @@
}
img {
aspect-ratio: 4/5;
/* max-height: 200px; */
@apply w-full h-full relative z-10;
@apply max-h-[200px] lg:max-h-full w-full h-full relative z-10;
@apply object-cover;
/* width: calc(100% - 2rem);
height: calc(100% - 2rem);