CMS Development

Moore
Participant

Responsive floating bottom CTA bar

SOLVE

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.

 

<script src="https://kit.fontawesome.com/ab936ec08f.js" crossorigin="anonymous"></script>

<div id="mybar">

<ul class="floating-bar">

<li><a href="https://info.patientmatters.com/rcm-insights">Subscribe to RCM Insights &nbsp; <i class="far fa-envelope"></i></a></li>
<li><a href="https://info.patientmatters.com/contact-sales">Contact Sales &nbsp; <i class="far fa-address-card"></i></a></li>
<li><a href="https://info.patientmatters.com/schedule-a-demo">Schedule a Demo &nbsp; <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;

}

0 Upvotes
1 Accepted solution
JanetArmstrong
Solution
Top Contributor | Partner
Top Contributor | Partner

Responsive floating bottom CTA bar

SOLVE
 .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.

View solution in original post

8 Replies 8
JanetArmstrong
Top Contributor | Partner
Top Contributor | Partner

Responsive floating bottom CTA bar

SOLVE

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?

0 Upvotes
JanetArmstrong
Top Contributor | Partner
Top Contributor | Partner

Responsive floating bottom CTA bar

SOLVE

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

 

0 Upvotes
JanetArmstrong
Solution
Top Contributor | Partner
Top Contributor | Partner

Responsive floating bottom CTA bar

SOLVE
 .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.

Moore
Participant

Responsive floating bottom CTA bar

SOLVE

This works, thank you for your help.

0 Upvotes
Moore
Participant

Responsive floating bottom CTA bar

SOLVE

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.

 

0 Upvotes
JanetArmstrong
Top Contributor | Partner
Top Contributor | Partner

Responsive floating bottom CTA bar

SOLVE

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;

}

0 Upvotes
Moore
Participant

Responsive floating bottom CTA bar

SOLVE
Hi Janet,
Thank you for looking this over for me.  Here is the link 
 
 
Chris
 
0 Upvotes
Moore
Participant

Responsive floating bottom CTA bar

SOLVE

Hi Janet,

 

Here are some screenshots with the  problem I am running into with the CTA floating bar.Screen Shot 2020-07-28 at 12.34.51 PM.pngScreen Shot 2020-07-28 at 12.35.33 PM.pngScreen Shot 2020-07-28 at 12.35.47 PM.pngScreen Shot 2020-07-28 at 12.35.43 PM.pngScreen Shot 2020-07-28 at 12.35.38 PM.pngScreen Shot 2020-07-28 at 12.35.51 PM.pngScreen Shot 2020-07-28 at 12.35.56 PM.png

0 Upvotes