Adjust nonMobile column structure

Mak left image wrapper smaller and also make the right close column only 1 col and allow for main form column to expand. This will make the whole pushdown shorter.
parameter1 · Jun 30, 2023 · dfc6c3c · dfc6c3c
1 parent e286bae
commit dfc6c3c
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/packages/marko-web-theme-monorail/browser/site-newsletter-menu/step1.vue b/packages/marko-web-theme-monorail/browser/site-newsletter-menu/step1.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="row">
-    <div :class="element('image-wrapper', ['d-none', 'd-md-flex', 'col-md-5', 'col-lg-4'])">
+    <div :class="element('image-wrapper', ['d-none', 'd-md-flex', 'col-md-3'])">
       <img
         v-if="imageSrc"
         :src="imageSrc"
@@ -9,7 +9,7 @@
         :class="element('image')"
       >
     </div>
-    <div :class="element('form-wrapper', ['col-12', 'col-md-6', 'col-lg-5'])">
+    <div :class="element('form-wrapper', ['col-12', 'col-md-8'])">
       <div :class="element('name')">
         {{ name }}
       </div>
@@ -53,7 +53,7 @@
         {{ error.message }}
       </div>
     </div>
-    <div :class="element('close-container', ['d-none', 'd-md-flex', 'col-md-1', 'col-lg-3'])">
+    <div :class="element('close-container', ['d-none', 'd-md-flex', 'col-md-1'])">
       <close-button
         :class-name="element('close').join(' ')"
         target-button=".site-navbar__newsletter-toggler"

diff --git a/packages/marko-web-theme-monorail/scss/components/_site-newsletter-menu.scss b/packages/marko-web-theme-monorail/scss/components/_site-newsletter-menu.scss
@@ -78,7 +78,7 @@
   }
 
   &__image {
-    width: 280px;
+    width: 170px;
     margin-top: auto;
     margin-right: auto;
     margin-left: auto;