Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #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 2 months, 1 week ago by  andyux. Reason: added url
    #1147371

    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,
    Vinay

    #1147767

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

    #1148762

    Hi,

    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,
    Ismael

    #1148919

    Thank you

    #1149097

    Hi,

    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,
    Rikard

    #1151471

    All good you can close thanks

    #1151518

    Hi andyux,

    Great :) We are closing the thread.

    Best regards,
    Victoria

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

The topic ‘Layerslider – arrow navigation (next previous) size’ is closed to new replies.