Some CSS help to make button responsive?

1

Hi all,
I’ve encountered a problem while using custom CSS in wordpress when I want to code a plugin’s button. It looks perfectly fine in desktop version but not after it resizes or in mobile version.

Here’s a screenshot of it: http://prntscr.com/fe28dg

What should I add in CSS to make it work properly in both laptop and mobile devices?

Thanks for your time!

2
  1. How did you code the button?
  2. What’s the CSS markup of your button?
3

It’s HTML

And here’s a screenshot of ‘inspect element’ for the button

4

Did you set a width for the button? I’m not seeing that in the css. Try setting a relative width in the media query. Something like:

.ap-btn-ask {
  width: some percentage (80% for example)
}
5

It looks like you need to set the @media widths in your CSS so that your code is responsive to specific mobile devices.

6

You’ll want to adjust the font size for the device width you’re having trouble with.

Check this out for more info.

7

I tried this, it doesn’t work well. It’s either okay on the desktop version or mobile version but never both. Thanks anyway!

8

It says “Oops! That page doesn’t exist or is private.”

9

It looks like this now https://prnt.sc/fe2zt0

10

It works for me on iOS.

11

Try adjusting display.