I want to create my slider's arrows taller. I want them to be stretched vertically. I use WordPress plugin called SmartSlider. I have already tried to use CSS :
.nextend-arrow{
width:100px!important;
height:100px!important;
}
I have found it on the plugin's website. When I change only height to be greater than width arrows remain in the previous size... I also tried using :
.nextend-arrow{
height:100%!important;
}
This is the previous arrow (from Chrome inspect):
<div data-ssleft="0+15" data-sstop="height/2-previousheight/2" id="n2-ss-7-arrow-previous" class="n2-ss-widget n2-ss-widget-display-desktop n2-ss-widget-display-tablet n2-ss-widget-display-mobile n2-style-15840d24d130269e6b64e6608dab2b08-heading nextend-arrow n2-ow nextend-arrow-previous nextend-arrow-animated-fade n2-ib" style="position: absolute; width: 22.4px; height: 280px; top: 2.5px; left: 15px;" role="button" aria-label="Previous slide" tabindex="0"><img class="n2-ow" data-no-lazy="1" data-hack="data-lazy-src" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEuNDMzIDE1Ljk5MkwyMi42OSA1LjcxMmMuMzkzLS4zOS4zOTMtMS4wMyAwLTEuNDItLjM5My0uMzktMS4wMy0uMzktMS40MjMgMGwtMTEuOTggMTAuOTRjLS4yMS4yMS0uMy40OS0uMjg1Ljc2LS4wMTUuMjguMDc1LjU2LjI4NC43N2wxMS45OCAxMC45NGMuMzkzLjM5IDEuMDMuMzkgMS40MjQgMCAuMzkzLS40LjM5My0xLjAzIDAtMS40MmwtMTEuMjU3LTEwLjI5IiBmaWxsPSIjMzcyZjJmIiBvcGFjaXR5PSIwLjUxIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=" alt="previous arrow" style="width: 100%;"></div>
<img class="n2-ow" data-no-lazy="1" data-hack="data-lazy-src" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEuNDMzIDE1Ljk5MkwyMi42OSA1LjcxMmMuMzkzLS4zOS4zOTMtMS4wMyAwLTEuNDItLjM5My0uMzktMS4wMy0uMzktMS40MjMgMGwtMTEuOTggMTAuOTRjLS4yMS4yMS0uMy40OS0uMjg1Ljc2LS4wMTUuMjguMDc1LjU2LjI4NC43N2wxMS45OCAxMC45NGMuMzkzLjM5IDEuMDMuMzkgMS40MjQgMCAuMzkzLS40LjM5My0xLjAzIDAtMS40MmwtMTEuMjU3LTEwLjI5IiBmaWxsPSIjMzcyZjJmIiBvcGFjaXR5PSIwLjUxIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=" alt="previous arrow" style="width: 100%;">
Img is inside that div.
And image: Slider
I want these arrows to be almost as tall as the slider, but thin as now.
This is my first post, sorry for my poor language and thanks for Your help.
I would create a container for them. Give the container a position: relative;, the arrows a position: absolute;, then you can use 100%.
The reason height: 100%; is not working right now is the browser doesn't know what to compare 100% to, since there is no given height for the parent element.
