How do I…? – Part 2

4. Update: Go to http://www.strengthinnumberscoaching.com/test/coaching and you’ll see two progress bars between two animated numbers. Just focus on the first one. Here’s the changes I want to make if possible…

A. The black box the text is set in. I want to either remove it or make it smaller. I hate the overlap. I want just to see the bar and have the description lined up with it.
B. I changed it so I can make one bar 141% (the top one) and another 99% (the bottom one) but it’s not proportionate at all and the top one appears to be getting cutoff.
C. The bar doesn’t explain the percentage. Any way to show this? If not I can just put it in the description box I guess. (ex. Before Coaching – 141%)

• This reply was modified 9 years, 7 months ago by strengthcoaching.

Try again. Loads fine for me.

Oops. I mistyped my url in my last comment. I adjusted it above. Try again.

1. I think you may be mistaken. I asked to “Enable Social icons/links in mobile layout/menu (not the footer)”. There is no “talk to me” box on mobile. Also, the bottom right area is the footer. Exactly where I said “not”. Please revisit this. I’ve added the above code you gave me to be safe but I already have turned off Tawk on mobile in their dashboard as well prior to this status.

2. ok

4.
A. I added the code for the bar title. That worked great thanks! How do I adjust the opacity and font color of those titles? What I want to do basically is have the white text (or whatever color I determine looks good) be there and not the black shaded box. I’m assuming that’s an opacity setting? i figured this one out after about 30 min of digging through search results and tinkering.
B. Concerning the second pair of bars what I did as a test was made one 70% and another 100% because 99% is 70% of 141%. I’ll just make that work.
C. I still don’t have a solution for the bars showing their respective percentages but I can work around that if I have to. I’d rather not.
D. Once again, any way to make these bars go vertical and not just horizontal?

• This reply was modified 9 years, 7 months ago by strengthcoaching.

Could someone please follow up on this 2 day old topic? It’s the last thing I have to resolve at this point for me to launch my site. Thanks!

That made it work to be one line on the ipad but not iphone (which still looks the same). Also, the menu now looks really smushed close to each other on the ipad both in vertical view and horizontal view. Maybe I should just turn off nav in the footer?

LOL i need a notebook just to keep track of what all this stuff i’m putting in Quick CSS is for! :)

I added those but it doesn’t appear to have worked. iPad still has nav and nothing is centered on iPhone. Here’s the Quick CSS section where I pasted the last two things you gave me…

@media only screen and (min-width: 767px) and (max-width: 1024px){
    #socket .sub_menu_socket {
        position: absolute;
        left: 50px;
        right: 0px;
        text-align: center;
        top: 10px;
    }

    #socket .sub_menu_socket li {
        display: inline-block;
        padding: 0px;
        float: none;
    }
}

@media only screen and (max-width: 480px){
#socket .social_bookmarks {
  float: none;
  margin-left: 0px;
  display: inline-block;
}
#socket .copyright {
  float: none;
  display: inline-block;
  width: 100%;
}
}

@media only screen and (max-width: 1024px)
#socket .sub_menu_socket {
  display: none;
}
}

Did it. Now this is how it looks.

iphone vertical

iphone horizontal

ipad mini vertical

ipad mini horizontal