Link Buttons in Layer Slider

Hello,
I have a little problem with the homepage of blumen-hegemann.de. It uses the Enfold theme and the layer slider. There are four buttons that link to other pages. For small screens (> 768px) I created some extra buttons, gave them the class “layerslider-button-smart” and use the following CSS:

@media (max-width: 768px) {
	/* Buttons im Layerslider Startseite */
  .layerslider-button-smart {
  	min-width: 200px !important;
  	text-align: center;
  	margin-left: auto !important;
  	margin-right: auto !important;
  }
  .ls-wrapper.ls-in-out.ls-hide-on-tablet.ls-hide-on-desktop {
  	min-width: 220px !important;
  }
  .ls-wrapper > a.ls-layer-link {
	background: rgba(255,255,255,0.2) !important;
  }
  .ls-wrapper > a.ls-layer-link:hover {
	background: rgba(255,255,255,0.6) !important;
  }

Now there is some weird behaviour:
– on desktops with resized window everything is fine
– on Android Smartphones everyhing is fine
– on iPhones the size of the link (hover and clickable) is exactly only the left half of the button

Any suggestions?
Thanks in advance,
Daniel