StephanieFlynnLaw

I would appreciate it if you would provide the code.

Can this code be used for certain pages and not the entire site? I would like different sections to expand on different website pages.

I have a flexbox with 9 boxes on the first page of my website (https://www.veritaslegalassociates.com/). The last box is lower than the rest of the boxes in the row. How do I align the last box vertically top and bottom with the rest of the boxes in that row? Here is the code I'm currently using: <style> .services-box { display: flex; justify-content: center; align-items: end; flex-wrap: wrap; } .service { margin: 20px; } .flip-box { background-color: transparent; width: 340px; height: 340px; border: 1px solid #f1f1f1; border-radius: 10px; perspective: 1000px; } .flip-box-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; display: flex; justify-content: center; align-items: center; } .flip-box:hover .flip-box-inner { transform: rotateY(180deg); } .flip-box-front, .flip-box-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; justify-content: center; align-items: center; flex-direction: column; } .flip-box-front { background-color: #fff; color: black; border-radius: 10px; } .flip-box-front img { height: 100%; width: 100%; } .flip-box-back { background-color: rgb(18,50,73); color: #000; transform: rotateY(180deg); border-radius: 0px; } .flip-box-front h2 { position: absolute; bottom: 0; font-size: 24px; color: #fff; padding: 10px 15px; } .flip-box-back h2 { font-size: 18px; color: #fff; margin: 0px; padding: 0px 15px; } .flip-box-back p { font-size: 16px; color: #fff; padding: 0px 15px; } .flip-box-back a { text-decoration: none; font-size: 15px; color: #000; background-color: #fff; border-radius: 5px; padding: 10px 30px; font-weight: 700; } </style>

website: https://www.veritaslegalassociates.com/ It's not set up via the announcement bar. It's set up in the custom css. When I try to add the mailto language, it completely changes the announcement bar. Am I not able to add both the phone number and the email address as clickable links?

https://www.veritaslegalassociates.com/

How do I move the "Phone" block to the right on the mobile view? This is the current code: //Mobile styles @media screen and (max-width: 767px) { #announcement-bar-text-inner-id { display: block; } #announcement-bar-text-inner-id p:nth-child(3) { display: none; } .sqs-announcement-bar-text::before { width: 20px; } } .sqs-announcement-bar{ background:#043249 }

How do I make the "info@veritaslegalassociates.com" in the announcement bar clickable so it brings up an email? Here is the code I used to get the email block in the announcement bar: .header-nav:before { content: "info@veritaslegalassociates.com"; display: block; position: absolute; left: 495px; top: -98px; font-size: 14px !important; color: white; text-align: right !important; padding: 1.4em; margin: 0 57em; border: 1px; border-style: solid; border-color: #FFFFFF; /* white */ background:#6D4C3D; } Whenever I try to change the content to make it click through it changes the entire announcement bar and takes away the formatting I've created to have a second header line.