Tagged: button, LayerSlider, navigation, size
-
AuthorPosts
-
October 6, 2019 at 2:43 pm #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 allThe /* 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 5 years, 2 months ago by andyux. Reason: added url
October 12, 2019 at 2:51 pm #1147371Hey 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,
VinayOctober 14, 2019 at 9:57 am #1147767This page. Element are the navigation arrows (left, right -> previous, next) thanks
October 17, 2019 at 4:22 am #1148762Hi,
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,
IsmaelOctober 17, 2019 at 2:15 pm #1148919Thank you
October 18, 2019 at 5:38 am #1149097Hi,
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,
RikardOctober 27, 2019 at 8:11 am #1151471All good you can close thanks
October 27, 2019 at 11:46 am #1151518Hi andyux,
Great :) We are closing the thread.
Best regards,
Victoria -
AuthorPosts
- The topic ‘Layerslider – arrow navigation (next previous) size’ is closed to new replies.