Fix Css mobile first approach

hlxsites · Jun 5, 2024 · dba5aa8 · dba5aa8
1 parent 94ba880
commit dba5aa8
Showing 1 changed file with 52 additions and 45 deletions.
diff --git a/blocks/floatingagent/floatingagent.css b/blocks/floatingagent/floatingagent.css
@@ -1,7 +1,7 @@
 .floatingagent.block {
-    display: none;
+    display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-start;
     position: fixed;
     bottom: 0;
     left: 0;
@@ -14,68 +14,75 @@
 }
 
 .floatingagent.block > .floating-agent-col {
-    margin-left: 100px;
-    display: flex;
-    margin-right: 10px;
-    flex: none;
-}
-
-.floatingagent.block > .agentinfo > p {
-    margin-block-end: 0;
-    font-family: var(--font-family-primary);
-    font-size: var(--body-font-size-xxs);
-    font-style: normal;
-    font-weight: var(--font-weight-normal);
-    letter-spacing: normal;
-    color: #2a2223;
-}
-
-.floatingagent.block > .agentinfo > h2 {
-    font-size: var(--heading-font-size-m);
-    line-height: 130%;
-    letter-spacing: .18px;
-    vertical-align: top;
-    color: #2a2223;
-    width: max-content;
-}
-
-.floatingagent.block > .floating-agent-col > picture {
-    height:40px;
-    width:30px;
-    margin-right: 40px;
-}
-
-.floatingagent.block > .floating-agent-col > picture > img{
-    display: inline;
+    display: none;
 }
 
 .floatingagent.block > .agentinfo {
-    flex-grow: 1;
-    margin-top: 10px;
+    display: none;
 }
 
 .floatingagent.block > .contactagent {
+    display: block;
     align-self: center;
     background: var(--primary-color);
     color: var(--tertiary-color);
     border: 0;
-    flex: none;
     padding: 10px;
-    margin-right: 5%;
+    margin-left: 35%;
 }
 
-@media (max-width: 600px) {
+@media (min-width: 600px) {
     .floatingagent.block {
-        justify-content: flex-start;
+        justify-content: space-between;
+    }
+
+    .floatingagent.block > .floating-agent-col {
+        margin-left: 100px;
+        display: flex;
+        margin-right: 10px;
+        flex: none;
+        margin-bottom: 20px;
     }
 
-    .floatingagent.block > .floating-agent-col > picture > img,
     .floatingagent.block > .agentinfo {
-        display: none;
+        display: block;
+        flex-grow: 1;
+        margin-top: 10px;
+        margin-bottom: 15px;
+    }
+
+    .floatingagent.block > .agentinfo > p {
+        margin-block-end: 0;
+        font-family: var(--font-family-primary);
+        font-size: var(--body-font-size-xxs);
+        font-style: normal;
+        font-weight: var(--font-weight-normal);
+        letter-spacing: normal;
+        color: #2a2223;
+    }
+
+    .floatingagent.block > .agentinfo > h2 {
+        font-size: var(--heading-font-size-m);
+        line-height: 130%;
+        letter-spacing: var(--letter-spacing-xxxs);
+        vertical-align: top;
+        color: #2a2223;
+        width: max-content;
+    }
+
+    .floatingagent.block > .floating-agent-col > picture {
+        height: 40px;
+        width: 30px;
+        margin-right: 40px;
+    }
+
+    .floatingagent.block > .floating-agent-col > picture > img {
+        display: inline;
     }
 
     .floatingagent.block > .contactagent {
-        display: block;
+        flex: none;
+        margin-right: 5%;
         margin-left: 10px;
     }
-}
+}