diff --git a/blocks/floatingagent/floatingagent.css b/blocks/floatingagent/floatingagent.css index b55eeb85..688323d9 100644 --- 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; } -} \ No newline at end of file +}