Buttons on Mobile Devices

Hello. I noticed that buttons are showing up incorrectly, with rounded corners and position a little off on mobile devices. I know that some of the templates were not designed for mobile, but is there a way to fix it? Thank you in advance.

Could you post an url to your site?

Hi Cyberek. Thank you for replying to my post. Actually, to keep it simple, I noticed that the same thing happens on your demo sites, the ones that are not responsive. Please take a look at the esport and you will see what I am talking about. Please make sure you access it from the phone or tablet. Thank you.

Could you please create a screenshot of this problem on CloudHost?

Could you please create a screenshot of this problem on CloudHost?

Hi Cyberek. Why did say CloudHost? I was referring to esport template. Were you able to take a look at the demo site?

You have posted in CloudHost forum - perhaps I should move it to esport?
If its esport issue - please post a screenshot of this problem.

You have posted in CloudHost forum - perhaps I should move it to esport?
If its esport issue - please post a screenshot of this problem.

I am sorry for the inconvenience. Please move it to the appropriate category. Thanks.

I have attached a screenshot showing the button. I hope this helps. Take a look at the currency button on the left module. Thank you.

Hi Cyberek. Did you get a chance to look into this? Thanks.

I have no idea how to reproduce your problem.
http://127.0.0.1/gavick.com/j2/esport/
on our demo server the buttons and elements render fine. Inside "store currencies" the are a little bit to left, but those elements are not centered - they are aligned left with the text above.

I have no idea how to reproduce your problem.
http://127.0.0.1/gavick.com/j2/esport/
on our demo server the buttons and elements render fine. Inside "store currencies" the are a little bit to left, but those elements are not centered - they are aligned left with the text above.

Hi Cyberek. You can easily reproduce this if you open the site on iPad or probably any other tablet. Thank you.

Please edit: /templates/gk_esport/css/override.css and add at its end:

Code: Select all

.button, input[type="submit"] {line-height: initial;}


Remember to enable "CSS override" in template settings - advanced section.

Please edit: /templates/gk_esport/css/override.css and add at its end:

Code: Select all

.button, input[type="submit"] {line-height: initial;}


Remember to enable "CSS override" in template settings - advanced section.

Hi Cyberek. Thanks for providing the solution. I have tried it, but that only fixed the height. I also need to fix the border-radius property. It is currently displaying rounded corners. I need it to look like the rest of the buttons, with squared corners. Thank you for all your help.

This might be a little more tricky, as it seems like iPad's (iOs in general) ignores styling applied to <button> element. Workaround would involve messing with core VM files what is not the best available solution .

This might be a little more tricky, as it seems like iPad's (iOs in general) ignores styling applied to <button> element. Workaround would involve messing with core VM files what is not the best available solution .

Thanks for getting back. I found a solution that actually worked:

Code: Select all

input[type="submit"]{
   -webkit-appearance: none;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

Thank you!

Strange, I would bet I have seen those styling there and it just didn't work on iPad :/.