-
Posts
-
I am wandering how to change the easy slider HUD nav buttons. I think they are appropriate for tablets and desktop but when viewed on a mobile device the two arrow boxes cover most of the image and what isn’t covered is blocked by the circle image number indicators. For say a slider with 15 or so images. So I want to change the size but not globally just to a media query of say the 768 or below or 400 something below. I know we’re I can make CSS style changes and target screen sized in my child theme styles CSS file. But i don’t know if those HUD nav button are controlled by php, or Ajax or what. If it isn’t CSS I am wondering if the change can still be mobile specific like with CSS styling. I am hoping so.
Either way on mobile only I either want to turn off the circle indicators and hide the box part of the arrow nav just leaving the actual arrows, or completely hide all the HUD nav on the easy sliders.
The full width sliders are better mobile as they arrow nav boxes are taller and less wide covering less of the images. But if it is not full width they are squares and cover most the image. Hopefully thus isn’t to involved for you guys for forum support environment. As a photographer i find photo presentation tough on mobile devices. Other than just posting the photos one on top of each other down a page. This is fine for mobile but then the pages just become never ending scrolling and that isn’t too neat and tidy
Anyone know how to do this on all easy sliders?
On Mobile only: I want to turn off the circle indicators and hide the box part of the arrow nav just leaving the actual arrows for easy sliders viewed on mobile devises. Say target media screen less than 420px
Hi
In the theme’s custom.css file (in the css folder) we have 2 predefined media queries for you to use. Add the below to the mobile only query:
#top .avia-small-width-slider .avia-slideshow-arrows a {
width: 30px;
height: 30px;
margin: -15px 5px 0;
line-height: 32px;
font-size: 15px;
}Then adjust its sizing as needed or do a display: none; to remove them all together if you want.
Regards,
Devin
Devin,
What is the exact Custom.css code to remove the arrows on the easy slider for mobile?
And what about removing for full desktop?
Thanks.
-Carl
Hey,
You can use this on your custom.css or Quick CSS to remove the arrows on mobile device:
@media only screen and (max-width: 767px) {
.avia-slideshow .avia-slideshow-arrows.avia-slideshow-controls {
display: none !important;
}
}For desktop, you can use this:
.avia-slideshow .avia-slideshow-arrows.avia-slideshow-controls {
display: none !important;
}Regards,
Ismael
These codes are working to adjust guys thanks. But still not quite what I want. on the square nav controls ( .avia-slideshow-arrows I want to remove or hide the actual square shape but still have the arrows visable
Hey,
If you want to remove the square or box, just use this:
.avia-slideshow-arrows a::before {
background: #000;
background: transparent;
}You can change the arrow color using this:
#top .avia-slideshow-arrows a {
color: red;
}Regards,
Ismael
Devin,
I tried adding the “display: none” code to the custom.css and it semmed to have no effect on the easy slider on the top right part of the sidebar on my home page.
I also tried adding it to the “quick CSS” and that also did not work.
Any ideas?
Hey,
Add !important.
display: none !important;Remove browser cache then reload the page.
Regards,
Ismael
EDIT: it works…
Here is what I have in my quick css:
Code:.breadcrumb{
display:none;
}
.avia-slideshow .avia-slideshow-arrows.avia-slideshow-controls {
display: none !important;
}
@media only screen and (max-width: 767px) {
.avia-slideshow .avia-slideshow-arrows.avia-slideshow-controls {
display: none !important;
}
}Is this correct?
- The topic ‘Easy slider HUD nav buttons change’ is closed to new replies.