Some CSS help to make button responsive?

Some CSS help to make button responsive?
0

#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.