Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #1145459

    Hello! I have included what i tried in my css below. Easyslider navigation arrow hides the arrows, until you touch the screen (slider) and they popup and remain. If this code would work after the user touches the screen, that would be fine. The user can currently swipe the slider (great), but if you click (touch), the arrows pop-up. Note that if the arrows popup at a smaller size that would be fine (50% of “normal”).

    So my options are in order of preference and or simplicity, if you could direct me please ( i just need one of these to work):
    1 – arrows after touch (at 50% of normal size)
    2 – always arrows (at 50% of normal size)
    3- no arrows at all

    The /* size 1 */ and /* size 2 */ dont seem to be affecting anything:

    /* Easyslider navigation arrow */
    @media only screen and (max-width:767px){  
    #top .avia-slideshow-arrows a {
     display: none;
    /* size 1 */
    @media only screen and (max-width:767px){    
        #top .avia-slideshow-arrows a {
            width: 20px;
            height: 20px;
        #top .av-control-minimal .avia-slideshow-arrows a:before {
            line-height: 8px;
        #top #wrap_all .avia-slideshow-button,
         #top .avia-button, .html_elegant-blog .more-link, 
         .avia-slideshow-arrows a:before {
             padding: 4px;
    /* size 2 */
    .avia-slideshow-inner {
    	min-height: 50vh;
    .avia-slideshow-inner li, .avia-slide-wrap {
    	height: 100%;
    .avia-slideshow li img {
            width: auto;
            max-width: 9999px;
    	object-fit: cover;
    	object-position: center center;
    • This topic was modified 4 years, 7 months ago by andyux. Reason: added url

    Hey andyux,

    Thank you for sharing the details. Posting your CSS code here does not help us to investigate the issue. Would you mind providing a precise link to the page, showing the elements in question? We need to be able to inspect them in order to help :)

    Best regards,


    This page. Element are the navigation arrows (left, right -> previous, next) thanks



    Thank you for the update.

    Do you want to decrease the size of the slider arrows on mobile view? If so, then the following css code should help.

    @media only screen and (max-width: 767px) {
        #top .avia-layerslider .ls-nav-prev, #top .avia-layerslider .ls-nav-next {
            width: 30px;
            height: 30px;
            line-height: 32px;
            font-size: 18px;
            margin: -14px 7px 0;
        #top .avia-layerslider .ls-nav-prev::before, #top .avia-layerslider .ls-nav-next::before {
            line-height: 32px;

    Best regards,


    Thank you



    Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,


    All good you can close thanks


    Hi andyux,

    Great :) We are closing the thread.

    Best regards,

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Layerslider – arrow navigation (next previous) size’ is closed to new replies.