This topic has 27 replies, 3 voices, and was last updated 4 years, 7 months ago ago by Rose Tyler
Hi,
1. May I ask why there is a big gap under the slider? How can I decrease it?
https://ibb.co/fCR4Fh3
2. May I ask why the arrows of the slider move downward when the screen size decreases?
https://ibb.co/7YNNK3t
Thank you
Hello,
1, 2) The slider is displayed according to your settings http://prntscr.com/s2x6p6 + http://prntscr.com/s2x6y0
Watch this video – https://youtu.be/_dVwgeruFJk
Regards
About the height, it is in full height now so there is a large space under the slider right?
I tried to set it into “Height of content”, but the slider cannot be shown.
Then I tried to set it into “Custom Height”, but how to set the Custom height value? Why there are 2 Custom height value fields? https://ibb.co/pfDdwht
I tried to set both Custom height value into 640px, which is the original height of the image, but there is still a large gap above and under the slider.
Hello,
There are settings for height for desktop and tablets/mobile.
Here is what I can see – http://prntscr.com/s33m9d , http://prntscr.com/s33mtb – http://prntscr.com/s33n0s , http://prntscr.com/s33n9l – http://prntscr.com/s33nj7
Inspect code using inspector tools. Open a web page in Google Chrome. Either:
-Select the Chrome menu at the top-right of your browser window, then select Tools > Developer Tools.
-Right-click on any page element and select Inspect Element.
The DevTools window will open at the bottom of your Chrome browser.
Regards
I already set 0px for mobile:
https://ibb.co/Jd3BRBJ
https://ibb.co/RT2VChd
But there is still a large gap when viewing on phone
It is because of the height – http://prntscr.com/s35bnf
Regards
So what do I do no? I set the custom height as 640px because the arrows go down when the screen is reduced. Can you just tell me how to eliminate the large gap above and below the slider when a user is viewing by a phone? Just tell me directly.
Thank you
Set Image size – Cover – http://prntscr.com/s37gf6 + http://prntscr.com/s37hqy
Regards
But the result of setting it “cover” is the entire image cannot be shown
Hello,
Yes, because it will be cut of to cover the slider area. Image comes as the background in this slider, so slider height does not depend on image size but on custom height settings or content height. In case you don’t plan to use any content http://prntscr.com/s3ends and just want to show the image with auto height then it would better to use the Image Gallery element with Nivo slider gallery type instead of the slider element.
Regards
I am using Image Gallery element now. May I ask how to change the style of the arrow?
https://ibb.co/4RdMMyf
I want the arrow to be like this: https://ibb.co/4RdMMyf
Is it possible?
Thank you
Hello,
Both screenshots are the same. Unfortunately, the default WPBakery element does not have option to change the style of the arrows, so it’s possible only by additional customization of the styles but I don’t know what design you want and can’t suggest anything.
Also, if you build sliders you may take a look at the Revolution slider (comes bundled with theme), it also has advanced settings for the slider navigation and for the responsive.
Regards
Hello,
Take my apologies for the delay in answering. Check now, please.
Regards
The arrows have no change.
Maybe you get me wrong, I mean I want to change the arrows style of the Image Gallery from this (https://ibb.co/4RdMMyf) to this (https://ibb.co/pyrR28v).
Thank you
Hello,
Here is what I can see on your site right now – http://prntscr.com/s4fote Is it what you are looking for? Please clear cache and check one more time.
Regards
The one you screenshotted is the Slider Element
I disabled the Slider Element now. There is only an Image Gallery left.
Now, the arrows of Image Gallery is like this: https://ibb.co/4RdMMyf
I want it to be like this: https://ibb.co/pyrR28v.
Thank you
Hello,
Did you edit the child theme style.css? Some code was missing, strange. Check now.
Regards
The arrows are great now. Thank you, you are so helpful. No, I never touch child theme style.css
I still want to ask about the margin problem. I already set the margin as 0px for phone, but there is still a big gap:
https://ibb.co/VWGbx0W
https://ibb.co/vdyzTdx
May I ask what code did to add to change the arrow style?
Hello,
What styles do you want to change? We added our code to child theme style.css. You can add your code to change styles to child theme style.css too. Or use the Yellow Pencil plugin to edit styles if you don’t have CSS skills (Appearance > Install plugins).
Regards
I just want to copy the same code (that changes the style of the arrows) to another website.
Hello,
You can find the custom code in the child theme style.css (Appearance > Edit Themes). If you use the same element on the another site it will work for that site.
Regards
Thank you
You’re welcome!
Regards
You must be logged in to reply to this topic.Log in/Sign up