Reduce button size and text for mobile

[KennyReff]

Hello. I have a page with a number of buttons, which looks fine on desktop, but is too big and goes off the screen on mobile. How can I cause the button and its text to get smaller only when viewed on mobile devices?

Attached is a shot showing the desktop version at the top and mobile at bottom. The black arrow at the bottom points to the button with the red outline that is too big on the mobile version.

Also, the same goes for images. Some of the images on mobile are too big, although they look great on desktop. How can I cause them to get smaller only on mobile?

Thanks very much!

[friech]

Hi @KennyReff,

Thank you for writing in, please provide us the direct page URL where we can see the issue. I can’t find the page you have on your screenshot.

By default the button element and image element are responsive, that issue you have usually happened if you applied a fixed width or a min-width on the element.

Cheers!

[KennyReff]

Sorry about that. It’s on the page below and here’s a shot of the settings.

http://www.limelightdc.com/naspghan/2nd-year-fellows-july-2020-landing-page/

[prakash_s]

Hello @KennyReff,
Thanks for writing to us
The button responsive is been interrupted by some external custom CSS codes.

Please check the screenshot given below.

Please remove the marked section from your custom codes to get rid of the issue.
You may need to adjust padding and margin for the button, but I suggest you use default options available with the element.

Please note that we don’t offer any support to custom codes.
Thanks

[KennyReff]

Hmm. The only code that’s in the WordPress Appearance -> Customize -> Additional CSS is this:

.x-nav-wrap.desktop {display: none;}
ul.x-nav {display: none;}
.x-btn-navbar.collapsed {display: none;}

Am I looking in the wrong place? Thank you.

[prakash_s]

Hello @KennyReff,

Thanks for wringing to us.
Go to Dashboard --X–Theme Options --CSS

Please check the screenshot below.

Click on the “CSS” and check there.

Thanks

[KennyReff]

There is no code in there.

[friech]

Hi @KennyReff,

Please turn off the Overflow hidden option on your buttons, so its label/text can wrap if necessary.

Cheers!

[KennyReff]

Turning off the Overflow hidden option did the trick! Thank you.

[nabeel]

Glad we could help.

Cheers!