[VibeGroupNLParticipant]

Good morning X team,

I have some problems with the scalability of my revolution slider menu buttons.

On the homepage of our website http://hebjijdevibe.com/ you can see i used the X theme transparent buttons in the revolution slider and it looks awesome if you ask me :).

However, when you watch in on a smaller screen, or mobile, it overlaps the buttons. I can not find out how to fix this.

What can I do to solve this problem?

[ChristopherModerator]

Hi there,

Would you share HTML code you use to create these buttons?

Thanks.

[VibeGroupNLParticipant]

Thanks for the quick reply.

This is the HTLM code:

[button class=”mybutton” type=”transparent” shape=”square” size=”large” href=”http://hebjijdevibe.com/over-vibe-group/” title=”Example”]Over Vibe Group[/button]

Thnx.

[ZeshanMember]

Hi there,

Thanks for writing in!

The buttons are set to positioned absolute in the slider, that’s the reason it overlaps on smaller screens. You may need to reduce the size of the buttons on specific screen size using the CSS media queries. Please review this article for more details: http://www.themepunch.com/faq/increase-size-of-text-on-mobile/.

Thanks!

[VibeGroupNLParticipant]

Thank you very much for the responce and the link. I read the page and tried to find out how i could transform the scale up into scale down, but my coding skills are letting me down.

Can you please help me a bit or is that outiside of your support? Thnx

[NicoModerator]

Hi There,

We believe that it is outside of our support however we could give it a try.

Would you mind sharing us your admin credential so we could take a closer look on your setup.

Thanks. Don’t forget to set it as private reply.

[VibeGroupNLParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

Thanks for the logins!

Please try adding following CSS code under Custom > CSS in the Customizer:

@media (min-width: 768px) and (max-width: 1024px) {
  .tp-caption .x-btn {
    padding: 5px 10px 5px;
    font-size: 12px;
  }
}

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[VibeGroupNLParticipant]

Thank you for the trouble, to bad it did not work though.

[ChristianModerator]

Please add !important like

@media (min-width: 768px) and (max-width: 1024px) {
  .tp-caption .x-btn {
    padding: 5px 10px 5px !important;
    font-size: 12px !important;
  }
}

Please clear your cache and browser history before checking.

Thanks.

[Author]

Posts