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

Refactor advertisement recommendation styling for improved layout and responsiveness

Browse Source
This commit is contained in:
Fabian Schieder 2026-03-30 23:59:30 +02:00
parent 328217271e
commit 4e95e1b130
1 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
ad_recommendation.php
View File

@ -13,20 +13,29 @@ if ($adProduct):
$fakeStock = rand(2, 5); $fakeStock = rand(2, 5);
?> ?>
<style> <style>
/* Verhindert horizontales Scrollen falls 100vw den vertikalen Scrollbar überlappt */
html, body {
overflow-x: hidden;
}
.ad-recommendation { .ad-recommendation {
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: 60px 5%; padding: 80px 3vw;
margin: 40px 0; margin: 40px 0;
width: 100%;
/* Zwingt den Container auf die exakte Bildschirmbreite, ignoriert alle Eltern-Container */
width: 100vw;
margin-left: calc(50% - 50vw);
box-sizing: border-box;
position: relative; position: relative;
display: flex; display: flex;
justify-content: center; justify-content: center;
color: #fff; color: #fff;
box-shadow: 0 10px 30px rgba(0,0,0,0.5); box-shadow: 0 10px 30px rgba(0,0,0,0.5);
overflow: hidden; overflow: hidden;
box-sizing: border-box;
} }
@keyframes gradientShift { @keyframes gradientShift {
@ -53,17 +62,18 @@ if ($adProduct):
} }
.ad-container { .ad-container {
max-width: 1800px; max-width: none;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 60px; justify-content: center;
gap: 8vw;
} }
.ad-image-container { .ad-image-container {
flex-shrink: 0; flex-shrink: 0;
width: 350px; width: 400px;
height: 350px; height: 400px;
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;
@ -165,7 +175,8 @@ if ($adProduct):
padding: 20px; padding: 20px;
border-left: 5px solid #ffd700; border-left: 5px solid #ffd700;
border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0;
max-width: 1000px; max-width: none;
width: 100%;
} }
.ad-urgency { .ad-urgency {