Responsive button

I've got a button on revolution slider with the following:

<a id="homebutton" href="#" >&nbsp;</a>

With the following CSS:

#homebutton {
position:fixed;
width: 188px;
height: 41px;
text-indent: -19999px;
background-image: url('http://***.com/wp-content/uploads/2014/11/button2.png');
}
#homebutton:hover{
  background-image: url('http://****.com/wp-content/uploads/2014/11/button2-2.png');

}

Code (markup):

The button works perfect on a desktop, but on mobile it renders it huge and not where it's supposed to be. How can I position it so it is responsive with mobile browsers?

 

I would recommend use of bootstrap buttons, They are awesome and responsive.

 

hey man. The issues is that your using fixed values for your width and height. Try using % instead of pixels. Or use font-size alongside padding. I can't suggest any values as I don't know how the button looks.
Lose the fixed positioning and try relative instead. Good luck

 

I changed position to relative and tried various percentages using width: 10%; width: 20%, but not only did nothing change based on the different % values, but even removing them all together nothing changed. It only shows a tiny portion of the button, the top left and not the whole thing. Any ideas? I could show you the site if that helps.

 

Put your code on codepen and put it back here...easier to see that way.

 

Why are you pissing off users with something that big fixed on the display that sucks down screen space better used for content... if you're worrying about mobile why don't you just feed that different CSS in your media queries?

Of course, if that's the jQuery-tard "revo slider" garbage, you've already pissed on the capability of being mobile friendly, so you're knee deep in it unless you want to throw the entire site away and start over. Mind you that's a wild guess with me pulling an assumption out of my backside, but just from what little you've said that's what I'm thinking.

 

You feel better after that rant? I came here for help because I can't get the percentages to work, I know fixed is the problem. Revolution slider looks just fine on the mobile, aside from this button. If you could help me figure out how to properly size the button with relative position, that'd be great. If not, I really fail to see the point of your post.

 

He's right. Use media query to make it responsive. Here's how it work: http://css-tricks.com/css-media-queries/