CSS Buttons on the Layerslider not scaling - Support | Kriesi.at

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
July 17, 2014 at 4:30 pm #292543
dmpitzer
Participant
Hi Guys!

I hope you can help, I created some CSS buttons on the LayerSlider, but they are not scaling even though I have css code to do it. Any help you have would be greatly appreciated, the code I am using is below:
```
/* Buttons on the Layer Slider*/
.btn {
  background: #71777a;
  background-image: -webkit-linear-gradient(top, #71777a, #3b3e40);
  background-image: -moz-linear-gradient(top, #71777a, #3b3e40);
  background-image: -ms-linear-gradient(top, #71777a, #3b3e40);
  background-image: -o-linear-gradient(top, #71777a, #3b3e40);
  background-image: linear-gradient(to bottom, #71777a, #3b3e40);
  -webkit-border-radius: 12;
  -moz-border-radius: 12;
  border-radius: 0px;
  text-shadow: 1px 1px 3px #666666;
  font-family: Arial;
  color: #fafafa!important;
  font-size: 16px;
  padding: 10px 20px 10px 20px;
  text-decoration: none!important;
}

.btn:hover {
  background: #adb1b3;
  background-image: -webkit-linear-gradient(top, #adb1b3, #858b8f);
  background-image: -moz-linear-gradient(top, #adb1b3, #858b8f);
  background-image: -ms-linear-gradient(top, #adb1b3, #858b8f);
  background-image: -o-linear-gradient(top, #adb1b3, #858b8f);
  background-image: linear-gradient(to bottom, #adb1b3, #858b8f);
  color: #ffffff!important;
  text-decoration: none;
}

* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

	.btn {
	  background: #71777a;
	  background-image: -webkit-linear-gradient(top, #71777a, #3b3e40);
	  background-image: -moz-linear-gradient(top, #71777a, #3b3e40);
	  background-image: -ms-linear-gradient(top, #71777a, #3b3e40);
	  background-image: -o-linear-gradient(top, #71777a, #3b3e40);
	  background-image: linear-gradient(to bottom, #71777a, #3b3e40);
	  -webkit-border-radius: 6;
	  -moz-border-radius: 6;
	 
	  text-shadow: 1px 1px 3px #666666;
	  font-family: Arial;
	  color: #fafafa!important;
	  font-size: 4x;
	  padding: 5px 10px 5px 10px;
	  text-decoration: none!important;
	}
	
	.btn:hover {
	  background: #adb1b3;
	  background-image: -webkit-linear-gradient(top, #adb1b3, #858b8f);
	  background-image: -moz-linear-gradient(top, #adb1b3, #858b8f);
	  background-image: -ms-linear-gradient(top, #adb1b3, #858b8f);
	  background-image: -o-linear-gradient(top, #adb1b3, #858b8f);
	  background-image: linear-gradient(to bottom, #adb1b3, #858b8f);
	  color: #ffffff!important;
	  text-decoration: none;
	}
    
}
```
Thank you,

Dave
July 18, 2014 at 3:05 am #292774

Devin
Inactive Moderator

Hey dmpitzer!

With the active minification I can’t inspect the button to see why it isn’t getting the media query css unfortunately. I would first suggest trying to change the class name to something much more specific since btn is very generic.

If you can clear and remove the minification we can try taking a look for you again.

Regards,
Devin

July 19, 2014 at 10:54 pm #293477

dmpitzer
Participant

Hi Devin,

Still no success even after renaming the btn title in the css to btnonslider, I have turned off minifications, so any help would be great!

Thanks,

Dave

July 20, 2014 at 5:03 am #293508

Ismael
Moderator

Hi!

Thank you for the info.

Can you please give us a temporary login details? We would like to check it. Set it as a private reply.

Regards,
Ismael

July 20, 2014 at 10:29 pm #293653

dmpitzer
Participant

This reply has been marked as private.

July 23, 2014 at 7:29 pm #295089

dmpitzer
Participant

Hi Guys,

Any ideas on this? It has been 3 days since I uploaded the info you all asked for.

Thank you,

Dave

July 28, 2014 at 9:48 am #296606

Devin
Inactive Moderator

Hey!

Our support queue has been a bit high over this weekend (when we are normally slower anyway because of the weekend).

The button isn’t scaling because the padding is defining its size in addition to the font. Since you have them explicitly in your css you also need to have the padding and font adjusted in a new media query for whatever breakpoint you want.

See: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

In the custom.css file of the theme files (in the css folder) I added a desktop and tablet+mobile one you can add your css to or use them as a reference/guide.

Best regards,
Devin

July 28, 2014 at 7:43 pm #296950

dmpitzer
Participant

Thank you Devin, that makes sense. I Was able to get it working with the info you provided, I appreciate all the help!

This has resolved my issue.

Dave
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘CSS Buttons on the Layerslider not scaling’ is closed to new replies.