slider padding

Hey pddcoms,

We would love to help you with this. Please provide a link to the site/page in question so we can look into this issue further.

Best regards,
Jordan Shannon

Hi,

Please try
#top .avia-slideshow-button.avia-color-ligh { margin-right: 80px; }

and let us know if that would work out for you.

Best regards,
Basilis

Hi pddcoms,

Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

#fullscreen_slider_1 .avia-slideshow-button.avia-color-light {
    margin-right: 20px !important;
}

If you need further assistance please let us know.

Best regards,
Victoria

Hi,

Yes the code Victoria gave should apply to all first fullscreen slider on all pages. :)

Best regards,
Nikko

Hi,

Try using this css code:

#top .avia-fullscreen-slider .avia-slideshow-button {
    margin-right: 20px !important;
}

Hope it helps.

Best regards,
Nikko

Hi,

Sorry I misunderstood what you said, I thought you were asking how to apply it on each slide, please remove the code on each slide and this should only apply to the first fullscreen slider on your homepage :)

.home #fullscreen_slider_1 .avia-slideshow-button.avia-color-light {
    margin-right: 20px !important;
}

Best regards,
Nikko

Hi,

No worries :) We would like to help you with what you’re trying to achieve. I think I understand what you meant, you have 6 slides with 2 buttons each, here are the css codes:

First Slide First Button (left)

.home #fullscreen_slider_1 .slide-1 .avia-slideshow-button {
    margin-right: 20px !important;
}

First Slide Second Button (right)

.home #fullscreen_slider_1 .slide-1 .avia-slideshow-button-2 {
    margin-right: 20px !important;
}

Second Slide First Button (left)

.home #fullscreen_slider_1 .slide-2 .avia-slideshow-button {
    margin-right: 20px !important;
}

Second Slide Second Button (right)

.home #fullscreen_slider_1 .slide-2 .avia-slideshow-button-2 {
    margin-right: 20px !important;
}

you’ll notice the changes I made are on .slide-x (where x is the slide #) and the first button uses .avia-slideshow-button and the 2nd uses .avia-slideshow-button-2. Hope you get the pattern :) Let us know if you need further assistance :)

Best regards,
Nikko

Hi,

Can you try adding this css code in Quick CSS (located in Enfold > General Styling):

@media only screen and (max-width:767px) {
  .home #fullscreen_slider_1 .avia-slide-wrap .avia-slideshow-button {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
  }
}

Hope it helps :)

Best regards,
Nikko

Hi,

Glad that we could help! Thanks for using Enfold and have a great day :)

Best regards,
Nikko