Move arrows outside slides

  • Resolved spidea

    (@spidea)


    5 years, 5 months ago

    We want to place the arrows outside the slider, as we have three images showing at once, its not a full width slideshow.

    I tried this in the browser editor and it worked:

    
.metaslider.ms-theme-bubble .flexslider ul.flex-direction-nav li a.flex-prev,
.metaslider.ms-theme-bubble .rslides_nav.prev, 
.metaslider.ms-theme-bubble div.nivoSlider div.nivo-directionNav a.nivo-prevNav,
.metaslider.ms-theme-bubble .coin-slider .coin-slider div a.cs-prev {
 left:-8% !important;
}

    However when I put this in Additional CSS it doesn’t change the layout on the live site.

    Any clues on how I can implement this shift to work?

    Many thanks

    • This topic was modified 5 years, 5 months ago by Steven Stern (sterndata). Reason: marked nsfw; moved link to appropriate field
    • This topic was modified 5 years, 5 months ago by Steven Stern (sterndata). Reason: code block
    • This topic was modified 5 years, 5 months ago by Jan Dembowski. Reason: Removed NSFW as that is not what that is for
Viewing 8 replies - 1 through 8 (of 8 total)
  • Kevin Batdorf

    (@kbat82)

    5 years, 5 months ago

    Hi,

    If you inspect the page and check the code do you see the rule you added there? It might just not be adding correctly.

    You can try clearing any cache.

    It could also be styles from elsewhere overriding, but that seems unlikely given you used !important

    Thread Starter spidea

    (@spidea)

    5 years, 5 months ago

    Yes I did try clearing the cache, it still doesnt work, I can’t figure out what’s blocking it. The rule is not added to the code, I have used two CSS editing – style.css and style.min.css and neither works.

    Kevin Batdorf

    (@kbat82)

    5 years, 5 months ago

    I can see it there. It needs to be more specific. Delete what you added and try this:

    body div.metaslider.ms-theme-bubble .flexslider ul.flex-direction-nav li a.flex-prev {
  left:-8% !important;
}
    Thread Starter spidea

    (@spidea)

    5 years, 5 months ago

    Ah yes that works! Any idea what the right side arrow needs to do the same? I can’t see a specific code there that relates only to one side
    I tried:

    body div.metaslider.ms-theme-bubble .flexslider ul.flex-direction-nav li a.flex-prev {
    right:-8% !important;
    }

    But no joy

    Thread Starter spidea

    (@spidea)

    5 years, 5 months ago

    Wait I think i saw it – a.flex-next

    Thread Starter spidea

    (@spidea)

    5 years, 5 months ago

    Thank you!

    Kevin Batdorf

    (@kbat82)

    5 years, 5 months ago

    All good now? I’ll mark this as resolved but reply as needed!

    Thread Starter spidea

    (@spidea)

    5 years, 5 months ago

    Yep all good thanks very much

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

The topic ‘Move arrows outside slides’ is closed to new replies.