-
Posts
-
Hello. Regarding the new Full Screen slider, there is a “Learn More” button used in the demo. It appears to be set as “Light Transparent”.
Is it possible to use this button style with the Layer Slider? Thanks.
Yes, you can use a button with layerslider – I’d recommend to use the shortcode generator (just go to a standard post editor page, use the “magic wand” icon to generate the button shortcode and then insert this shortcode into the html field of the layerslider). However note that these buttons are not responsive because layerslider can’t re-size them…
I would like to do this too. However, I need the button to be responsive. Is there a way to make the button responsive, or no?
Hi,
You can use media queries.
/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */
@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */
}Regards,
Ismael
Hi Dude / Ismael. The button that is used for the Full Screen Slider called “Light Transparent” style is not available from the short-code generator nor is it available from the button short-code.
Is there any way that we can apply the “Light Transparent” button style to the LayerSlider and also as a shortcode to other areas, like inside text block? If you could provide an example, that would be great. My other suggestion would be to have Kriesi include it as a button shortcode. Thanks.
Hi,
Yes, it is possible. You can add the html code:
<a href="#portfolio" class="avia-slideshow-button avia-button-light" data-duration="800" data-easing="easeInOutQuad">Learn more</a>Regards,
Ismael
Ismael, can you give me some CSS that would make the buttons smaller when the screen is around 840px? I tried a few different things, but it didn’t work.
Thanks!
Hey,
You can try this.
/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */
@media only screen and (max-width: 870px) {
#top .avia-slideshow-button.avia-button-light {
padding: 3px 8px;
font-size: 9px;
}
}Regards,
Ismael
That did not work for me. But I used this:
@media only screen and (max-width: 870px) {
.avia-button.avia-size-large {
padding: 5px 1px;
font-size: 10px;
min-width: 90px;
}
}And I also had to put this in there (to make the button even smaller):
@media only screen and (max-width: 443px) {
.avia-button.avia-size-large {
padding: 2px 5px;
font-size: 8px;
min-width: 20px;
}
}Thanks, this post can be resolved now.
- The topic ‘Full Screen Slider – Button’ is closed to new replies.