file: partially add responsive design for icon container in doc hit box

digital-blueprint · Jan 16, 2025 · ded808f · ded808f
1 parent 0d8c2b0
commit ded808f
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/src/baseObject.js b/src/baseObject.js
@@ -41,11 +41,13 @@ export const getCommonStyles = () => css`
         border-bottom: 1px solid var(--dbp-override-content);
         margin-bottom: calc(7px + 1vh);
     }
+
     .text-container {
         display: flex;
         flex-direction: column;
         color:var(--dbp-override-content);
     }
+
     .icon-container {
         display: flex;
         align-items: right;
@@ -58,26 +60,36 @@ export const getCommonStyles = () => css`
         width: 50px;
         height: 50px;
     }
+
     .ais-doc-Hits-content {
         display: grid;
         grid-template-rows: repeat(3, 1fr);
         gap: 10px;
     }
+
     .hit-content-item1 {
         grid-row: 1 / 3;
         color:var(--dbp-override-content);
         font-weight: bold;
         font-size:24px;
     }
+
     .hit-content-item2 {
         grid-row: 2 / 3;
         color:var(--dbp-override-content);
     }
+
     .hit-content-item3 {
         grid-row: 3 / 4;
         padding-top: 30px;
         color:var(--dbp-override-content);
     }
+
+    @media (max-width: 1280px) and (min-width: 768px) {
+            .icon-container  {
+                background-position-x: right;
+            }
+        }
 `;
 export class BaseFormElement extends ScopedElementsMixin(DBPLitElement) {
     constructor() {