Return to previous page

Slider Problem - by ejder077 - on WordPress WooCommerce support

This topic has 27 replies, 3 voices, and was last updated 4 years, 8 months ago ago by Rose Tyler

ejder077

Participant

April 20, 2020 at 11:48

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

Please, contact administrator
for this information.

#233993 Copied Theme version: Child 6.2.12

26 Answers

Rose Tyler

Support staff

April 20, 2020 at 21:59

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

#234024 Copied

ejder077

Participant

April 21, 2020 at 01:26

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

#234034 Copied

ejder077

Participant

April 21, 2020 at 01:28

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.

#234035 Copied

Rose Tyler

Support staff

April 21, 2020 at 07:19

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

#234052 Copied

ejder077

Participant

April 21, 2020 at 08:47

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

#234070 Copied

Rose Tyler

Support staff

April 21, 2020 at 08:55

It is because of the height – http://prntscr.com/s35bnf

Regards

#234072 Copied

ejder077

Participant

April 21, 2020 at 09:26

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

#234082 Copied

Rose Tyler

Support staff

April 21, 2020 at 10:39

Set Image size – Cover – http://prntscr.com/s37gf6 + http://prntscr.com/s37hqy

Regards

#234107 Copied

ejder077

Participant

April 21, 2020 at 11:56

But the result of setting it “cover” is the entire image cannot be shown

#234116 Copied

Olga Barlow

Support staff

April 21, 2020 at 16:30

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

#234155 Copied

ejder077

Participant

April 22, 2020 at 07:43

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

#234226 Copied

Olga Barlow

Support staff

April 22, 2020 at 08:26

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

#234238 Copied

ejder077

Participant

April 22, 2020 at 11:21

Sorry for the mistake.

I just want the arrow to be like this: https://ibb.co/pyrR28v

Thank you

#234268 Copied

Olga Barlow

Support staff

April 22, 2020 at 19:44

Hello,

Take my apologies for the delay in answering. Check now, please.

Regards

#234323 Copied

ejder077

Participant

April 23, 2020 at 01:54

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

#234345 Copied

Rose Tyler

Support staff

April 23, 2020 at 07:17

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

#234355 Copied

ejder077

Participant

April 23, 2020 at 08:59

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

#234362 Copied

Olga Barlow

Support staff

April 23, 2020 at 13:06

Hello,

Did you edit the child theme style.css? Some code was missing, strange. Check now.

Regards

#234443 Copied

ejder077

Participant

April 23, 2020 at 15:00

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

#234450 Copied

Olga Barlow

Support staff

April 23, 2020 at 16:34

Hello,

I don’t see mentioned issue at this moment http://prntscr.com/s4qca9

Regards

#234464 Copied

ejder077

Participant

April 24, 2020 at 04:27

May I ask what code did to add to change the arrow style?

#234528 Copied

Olga Barlow

Support staff

April 24, 2020 at 10:41

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

#234568 Copied

ejder077

Participant

April 25, 2020 at 08:24

I just want to copy the same code (that changes the style of the arrows) to another website.

#234655 Copied

Olga Barlow

Support staff

April 25, 2020 at 15:32

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

#234681 Copied

ejder077

Participant

April 26, 2020 at 01:42

Thank you

#234692 Copied

Rose Tyler

Support staff

April 26, 2020 at 07:25

You’re welcome!

Regards

#234703 Copied
Viewing 27 results - 1 through 27 (of 27 total)