Button position on sliders

Hey northorie,
Please link to your page so we can see the buttons in the sliders, and then explain how you want them moved, perhaps a screenshot would help.

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (min-width: 768px) { 
#top .caption_bottom .slideshow_caption .slideshow_inner_caption {
    position: relative;
    text-align: center;
}
#top .slideshow_inner_caption .avia-slideshow-button.avia-button {
    width: 300px;
    height: 100px;
    font-size: 24px;
}
.html_header_transparency #top #main .caption_bottom .slideshow_caption {
    padding-top: 0;
}
}
@media only screen and (max-width: 767px) { 
	#top .caption_bottom .slideshow_caption .slideshow_inner_caption {
    position: relative;
    text-align: center;
}
#top .slideshow_inner_caption .avia-slideshow-button.avia-button {
	padding: 10px 6px;
	font-size: 10px;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 450px) { 
.slideshow_inner_caption {
	top: -30px;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
When I check your page on desktop the css I posted above is not applied, and this is what makes the button larger and center, so I don’t know if you have an error in your css, or if you didn’t add it because you didn’t understand, but this is the desktop part of the css that you should ensure to use:

@media only screen and (min-width: 768px) { 
#top .caption_bottom .slideshow_caption .slideshow_inner_caption {
    position: relative;
    text-align: center;
}
#top .slideshow_inner_caption .avia-slideshow-button.avia-button {
    width: 300px;
    height: 100px;
    font-size: 24px;
}
.html_header_transparency #top #main .caption_bottom .slideshow_caption {
    padding-top: 0;
}
}

this is the result:

I now assume that you now wanted the button to move up a little, so you would then add this css:

@media only screen and (min-width: 768px) { 
.slideshow_inner_caption {
	top: -100px;
}
}

for this result:

feel free to adjust to suit.

Best regards,
Mike

Hi,
Try this example CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field to make the background color red, font white, and remove the border radius:

#top #wrap_all .slideshow_inner_caption .avia-slideshow-button.avia-button {
    background-color: red;
    color: white;
    border-radius: 0;
}

adjust to suit.
To make the button background color blue on hover add this css:

#top #wrap_all .slideshow_inner_caption .avia-slideshow-button.avia-button:hover {
    background-color: blue;
    color: white;
    border-radius: 0;
}

you can also change the font color and border radius on hover.

Best regards,
Mike

Hi,

You can open css comments using forward slash (/) and asterisk (*).

Example:

/* Add your Mobile Styles here */

Please check the link below for more examples: https://www.w3schools.com/css/css_comments.asp

Best regards,
Ismael