From d45028096f004c4723f0749c9e115b6493506420 Mon Sep 17 00:00:00 2001
From: Helldragon67 <kilian.scheidecker@orange.fr>
Date: Sat, 19 Oct 2024 18:17:12 +0800
Subject: [PATCH] hero for mobile
---
assets/css/hero.css | 30 +++++++++++-------------------
1 file changed, 11 insertions(+), 19 deletions(-)
diff --git a/assets/css/hero.css b/assets/css/hero.css
index f26946e..6d3143a 100644
--- a/assets/css/hero.css
+++ b/assets/css/hero.css
@@ -1,9 +1,15 @@
/* Base styles for the hero section */
.hero {
+ position: relative;
+ width: 100%;
+ margin: 0 auto; /* Centering the hero section */
display: flex;
- justify-content: center;
+ justify-content: space-between;
align-items: center;
- padding: 2rem;
+ padding-top: 80px;
+ padding-bottom: 80px;
+ padding-left: 40px;
+ padding-right: 40px;
background: linear-gradient(to bottom right, #F9B208, #E72E77);
}
@@ -71,25 +77,11 @@
}
/* Responsive layout for larger screens */
-@media screen and (min-width: 768px) {
- .hero {
- position: relative;
- width: 100%;
- margin: 0 auto; /* Centering the hero section */
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding-top: 80px;
- padding-bottom: 80px;
- padding-left: 40px;
- padding-right: 40px;
- background: linear-gradient(to bottom right, #F9B208, #E72E77);
- }
-
+@media screen and (min-width: 768px) {
.hero-inner {
- display: flex;
justify-content: space-between;
width: 100%;
+ flex-direction: row;
}
.hero-content {
@@ -127,7 +119,7 @@
}
.screenshot {
- width: 100%;
+ width: auto;
height: 330px;
background-color: white;
border: 5px solid black;