wip - mobile and tablet container sizing complete

adobecom · Dec 17, 2024 · b60a880 · b60a880
1 parent c7b02ea
commit b60a880
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 8 deletions.
diff --git a/express/blocks/how-to-steps-accordion/how-to-steps-accordion.css b/express/blocks/how-to-steps-accordion/how-to-steps-accordion.css
@@ -134,9 +134,40 @@ main .how-to-steps-accordion.image {
   max-width: unset;
 }
 
-
 @media (min-width: 768px) {
-  main .video-how-to-steps-accordion {
+
+  main .how-to-steps-accordion.video,
+  main .how-to-steps-accordion.image  {
+    max-width: 950px;
+    margin: auto;
+  }
+
+  main .how-to-steps-accordion .steps-content {
+    display: flex;
+    flex-direction: row;
+    padding: 0 24px;
+  }
+
+  main .how-to-steps-accordion .steps-content > * {
+    flex: 1 1 50%;
+    box-sizing: border-box;
+  }
+
+  main .how-to-steps-accordion.image .image-container {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+
+  main .how-to-steps-accordion.image .image-container img {
+    height: unset;
+  }
+
+  main .how-to-steps-accordion .steps-content .steps {
+    padding-left: 20px;
+  }
+
+  /* main .video-how-to-steps-accordion {
     max-width: unset;
   }
 
@@ -190,7 +221,7 @@ main .how-to-steps-accordion.image {
   main .how-to-steps-accordion .steps-content {
     flex-direction: unset;
     padding: 0 40px;
-  }
+  } */
 }
 
 @media (min-width: 1280px) {

diff --git a/express/blocks/how-to-steps-accordion/how-to-steps-accordion.js b/express/blocks/how-to-steps-accordion/how-to-steps-accordion.js
@@ -90,11 +90,11 @@ export default async function decorate(block) {
 
     if (hasBackground) {
       // So that background image goes beyond container
-      const stepsContentBackground = createTag('div', { class: 'steps-content-backg' });
-      const stepsContentBackgroundImg = createTag('img', { class: 'steps-content-backg-image' });
-      stepsContent.append(stepsContentBackground);
-      stepsContentBackground.append(stepsContentBackgroundImg);
-      stepsContentBackgroundImg.src = backgroundURL;
+      // const stepsContentBackground = createTag('div', { class: 'steps-content-backg' });
+      // const stepsContentBackgroundImg = createTag('img', { class: 'steps-content-backg-image' });
+      // stepsContent.append(stepsContentBackground);
+      // stepsContentBackground.append(stepsContentBackgroundImg);
+      // stepsContentBackgroundImg.src = backgroundURL;
     }
 
     if (isVideoVariant) {