Docs

[Noellemena]

HELLO you wonderful people!

I have made my Skillbar Percent Text larger and LOVE IT.
The only problem I am having is when I drag in the window to see as in mobile the text is getting squished and on top of each other.

Could you take a look and see what CSS I could add so it plays nice on mobile???

You can see on my new site (for meeeeeee)

Home

Scroll down and it is near the bottom, cannot miss it!
Thank you so much!
Noelle

[Darshana]

Hi Noelle,

Thanks for writing in! Could you please try adding this under Custom > CSS in the Customizer.

@media(max-width:480px){
  .x-skill-bar {
    height: 40px;
  }
  .x-skill-bar .bar .percent {
    height: 32px;
  }
}

Hope that helps.

[Noellemena]

Thank you Darshana, I will try this when I’m back in my office tomorrow. I wanted to also see if you can tell why my custom font called Black Diamond is not showing on my iPad or iOS?? I see this thread here that I will work through tomorrow from the forum here.

But since it takes till the next day for a reply (no problem, obviously you all are so busy because you are so awesome)

I do use 2 Custom fonts using @fontface and they work perfect on site. Just not on mobile. Same site as above.

https://community.theme.co/forums/topic/custom-fonts-not-showing-up-on-ios-working-fine-on-desktop/

Thanks so much!
Noelle

[Rue Nel]

This reply has been marked as private.

[Noellemena]

This reply has been marked as private.

[Lely]

Hi Noelle,

I did check and it is not working on desktop too. See attached screenshot.

I can see you have this custom CSS:

body .x-skill-bar .bar .percent {
     font-size: 175%; 
}

That CSS will affect your skill bar font size regardless of the screensize. Then above suggested CSS will only work on mobile or smaller screen as stated on the media query. Although, from checking the source code, you have not added it.

You can use this code if you want this to affect mobile only:

@media(max-width:480px){
  .x-skill-bar {
    height: 40px;
  }
  .x-skill-bar .bar .percent {
    height: 32px;
  }
body .x-skill-bar .bar .percent {
     font-size: 175%; 
}
}

Or this regardless of the screensize:

  .x-skill-bar {
    height: 40px;
  }
  .x-skill-bar .bar .percent {
    height: 32px;
  }
  body .x-skill-bar .bar .percent {
     font-size: 175%; 
  }

Hope this helps.

[Noellemena]

Thank you! The second CSS played very well with what I had in place. I tweaked a bit, and it is playing nice across devices 🙂
THANK YOU!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts