FSST/Geizkragen
FSST/Geizkragen
2
0
Fork 0
Code Issues Projects 1 Releases 1 Wiki Activity

Refactor advertisement styling for improved layout, responsiveness, and dynamic sizing

Browse Source
This commit is contained in:
Fabian Schieder 2026-03-31 00:02:49 +02:00
parent 4e95e1b130
commit 8860508afd
1 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
ad_recommendation.php
View File

@ -22,10 +22,9 @@ html, body {
background: linear-gradient(45deg, #ff0000, #ff8c00, #ff007f); background: linear-gradient(45deg, #ff0000, #ff8c00, #ff007f);
background-size: 600% 600%; background-size: 600% 600%;
animation: gradientShift 5s ease infinite; animation: gradientShift 5s ease infinite;
padding: 80px 3vw; padding: 90px 0;
margin: 40px 0; margin: 40px 0;
/* Zwingt den Container auf die exakte Bildschirmbreite, ignoriert alle Eltern-Container */
width: 100vw; width: 100vw;
margin-left: calc(50% - 50vw); margin-left: calc(50% - 50vw);
box-sizing: border-box; box-sizing: border-box;
@ -63,17 +62,19 @@ html, body {
.ad-container { .ad-container {
max-width: none; max-width: none;
width: 100%; width: 100vw;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: space-between;
gap: 8vw; gap: 6vw;
padding: 0 4vw;
box-sizing: border-box;
} }
.ad-image-container { .ad-image-container {
flex-shrink: 0; flex-shrink: 0;
width: 400px; width: clamp(360px, 34vw, 560px);
height: 400px; height: clamp(360px, 34vw, 560px);
background: radial-gradient(circle, #fff 0%, #ffe6e6 100%); background: radial-gradient(circle, #fff 0%, #ffe6e6 100%);
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
@ -123,7 +124,7 @@ html, body {
} }
.ad-title { .ad-title {
font-size: 4rem; font-size: clamp(3.2rem, 5.4vw, 6rem);
font-weight: 900; font-weight: 900;
margin: 0 0 15px 0; margin: 0 0 15px 0;
line-height: 1.1; line-height: 1.1;
@ -223,9 +224,15 @@ html, body {
} }
@media (max-width: 900px) { @media (max-width: 900px) {
.ad-recommendation {
padding: 60px 0;
}
.ad-container { .ad-container {
width: 100%;
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
gap: 28px;
padding: 0 5vw;
} }
.ad-title { font-size: 2.2rem; } .ad-title { font-size: 2.2rem; }
.ad-description { border-left: none; border-top: 5px solid #ffd700; border-radius: 0 0 10px 10px; } .ad-description { border-left: none; border-top: 5px solid #ffd700; border-radius: 0 0 10px 10px; }