Layerslider – arrow navigation (next previous) size

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, 9 months ago by andyux. Reason: added url