update : create the gap to management the ratio of hero and the image

DaleStudy · Jul 10, 2024 · 2739041 · 2739041
1 parent ce1e728
commit 2739041
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/components/language-section.js b/components/language-section.js
@@ -41,7 +41,7 @@ class LanguageSection extends HTMLElement {
         }
       }
 
-      div {
+      .hero {
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
@@ -61,11 +61,18 @@ class LanguageSection extends HTMLElement {
         }
       }
 
+      .gap {
+        @media only screen and (min-width: 1024px) {
+          justify-content: center;
+          width: 16%;
+        }
+      }
+
       aside {
         width: 100%;
 
         @media only screen and (min-width: 1024px) {
-          width: 63%;
+          width: 47%;
         }
       }
 
@@ -98,9 +105,6 @@ class LanguageSection extends HTMLElement {
 
         ::slotted([slot="desktop-image"]) {
           display: block;
-          width: auto;
-          height: 100%;
-          
         }
       }
     `;
@@ -115,7 +119,9 @@ class LanguageSection extends HTMLElement {
           <slot name="mobile-image"></slot>
         </aside>
 
-        <div>
+        <div class="gap"></div>
+
+        <div class="hero">
           <slot name="heading"></slot>
           <slot name="button"></slot>
         </div>

diff --git a/index.html b/index.html
@@ -201,8 +201,8 @@
         slot="desktop-image"
         src="images/vertical-language.png"
         alt="languages"
-        width="auto"
-        height="100%"
+        width="100%"
+        height="auto"
       ></ds-image>
       <ds-hero slot="heading">
         지역에 관계없이 다양한 언어로 참여할 수 있어요.