topic Re: Responsive floating bottom CTA bar in CMS Development

Responsive floating bottom CTA bar

Moore — Mon, 27 Jul 2020 16:46:46 GMT

I need help getting my foating bar to be responsive. It has three CTA with Icons. I am having problems with different screen sizes and having the bar not go all the way across bottom of screen. I need it to change to a lighter color when hovered as well. Any help will be greatly appreciated.

Here is the code I have now.

<li><a href="https://info.patientmatters.com/rcm-insights">Subscribe to RCM Insights   <i class="far fa-envelope"></i></a></li>
<li><a href="https://info.patientmatters.com/contact-sales">Contact Sales   <i class="far fa-address-card"></i></a></li>
<li><a href="https://info.patientmatters.com/schedule-a-demo">Schedule a Demo   <i class="far fa-calendar-alt"></i></a></li>
</ul>

</div>

floating-bar {
list-style-type: none;
margin: 0px;
padding: 25px;
padding-top: 20px;
padding-right: 25px;
padding-bottom: 20px;
padding-left: 25px;
overflow: hidden;
background-color: #30d9c5;
position: fixed;
bottom: 0;
padding-right: 59px;
overflow-x: auto;
display: flex;
align-items: center;
justify-content: center;
min-width: 50px;
white-space: nowrap;

}

li {
float: left;
}

li a {
color: white;
text-align: center;
padding: 45px 150px;
text-decoration: none;

}

Re: Responsive floating bottom CTA bar

JanetArmstrong — Tue, 28 Jul 2020 11:55:34 GMT

I think you have some issues with duplicate padding and other things in your css. Can you post a url and I'll take a look?

To create a different color on hover you add :hover to any selector in the css.

a:hover {

color: #something;

}

Re: Responsive floating bottom CTA bar

Moore — Tue, 28 Jul 2020 14:52:49 GMT

Hi Janet,

Thank you for looking this over for me. Here is the link

https://app.hubspot.com/design-previewer/5006213/templates/32303876918

Chris

Re: Responsive floating bottom CTA bar

Moore — Tue, 28 Jul 2020 16:38:24 GMT

Hi Janet,

Here are some screenshots with the problem I am running into with the CTA floating bar.

Re: Responsive floating bottom CTA bar

JanetArmstrong — Tue, 28 Jul 2020 18:02:09 GMT

you have padding on the li a at 150px-left and right.

It won't fit on smaller screens, which is why those aren't floating right anymore.

insteach of using padding, why don't you make each li 33% so they stretch across?

Re: Responsive floating bottom CTA bar

JanetArmstrong — Tue, 28 Jul 2020 18:02:43 GMT

I would really need to look at the live url to see what's going on.

Re: Responsive floating bottom CTA bar

Moore — Tue, 28 Jul 2020 18:23:43 GMT

Hi Janet,

thank you for the help so far. Here is a working link to see what is going on https://info.patientmatters.com/test.

Re: Responsive floating bottom CTA bar

JanetArmstrong — Tue, 28 Jul 2020 19:02:05 GMT

 .floating-bar {
    list-style-type: none;
    margin: 0px;
    background-color: #30d9c5;
    position: fixed;
    bottom: 0;
    left: 0;
    display: table;
    width: 100%;
}
li {
    display: table-cell;
    text-align: center;
}
li a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 6px
}
li a:hover {
    background:#000;
}
@media all and (max-width: 650px) {
   li a {
       font-size: 14px;
   }
}
@media all and (max-width: 500px) {
   li a {
       font-size: 12px;
   }
}

I think that will get you what you're wanting.

Re: Responsive floating bottom CTA bar

Moore — Wed, 29 Jul 2020 12:47:11 GMT

This works, thank you for your help.