[iamwithUParticipant]

Hello,
I’m learning to use a “slider” element for the first time. Are there any criteria to use it eg, must the image be of certain size?

I tried using an image of the size of (as seen in the media library):
File size: 43 KB
Dimensions: 1212 × 226

After inserting, there’s still a big empty block below my image. What must I do to insert an image correctly? Do I just place the url of the image into the dialogue box, after pressing the button “img” on the left panel of Cornerstone?

[Nabeel AModerator]

Hi there,

Thanks for writing around! There are no hard and fast rules but you can make sure to use the images of same dimension. You can use high resolution images. You can just click on img button and paste the image URL to add an image.

Can you also please provide the URL of your site so we can take a look?

Hope this helps!

[iamwithUParticipant]

Thanks Nabeel. I’m experimenting with sliders.

Could you kindly clarify some basic stuff about sliders:

#1. There is a difference between sliders and Revolution Sliders?

#2. I can set up sliders without having Revolution Slider?

#3. If so, why does your KB on sliders say:
“Getting Started
First up make sure you have created at least one slider in Revolution Slider which you’ll set to show on your page. ”

#4. What is a “masthead”?

#5. What is the difference between animation speed and slide duration – is it how long it takes for the an image to appear versus how long the image stays intact before the next image starts to appear?

#6. What are “control navigation” and “touch navigation”?

[iamwithUParticipant]

To add to above,

#7. I experimented and put in just 2 images for a slider. Why are there 2 square buttons (one white and one red) on top right of the image when it fades out and the other image fades in? These 2 square buttons are seen only during the transition. How do I get rid of them?

#8. I tried to place a slider right on top of a page. But there is a blank space between the top edge and the slider. Likewise between the bottom of the slider and my next element (a headline). I want this headline to sit right at the base of my image in the sliders. How do I get rid of the blank spaces on top and below of a slider? I tried looking at all the margin & padding of the section/row/column where the slider is – they are all 0px. I guess it’s the default design and built-in margin of a slider?

Look forward to your tips and tricks!

[JoaoModerator]

Hi There,

#1. There is a difference between sliders and Revolution Sliders?

X offers 3 Sliders:

X-Slider, this is a Conerstone Element, it is good to create simpkle slider.

Revolution Slider, Really good plugin awesome to create more complex slider.

Layer Slider, As good as Revolution, I personally prefer Revolution Slider

You can find a lot of youtube tutorials about this plugins Rev Slider and Layer Slider I reccomend you sticking to one of them and studying them a bit as they are fairly complex, not hard, but complex.

#2. I can set up sliders without having Revolution Slider?

Yes you can use the slider element in Cornerstone

#3. If so, why does your KB on sliders say:

If you want to put a slider above or below the masthead you need Revolution Slider

#4. What is a “masthead”?

The top part of your website of your website -> Header + Topbar

#5. What is the difference between animation speed and slide duration – is it how long it takes for the an image to appear versus how long the image stays intact before the next image starts to appear?

Slide animation is related how the slider will appear and disappear Slider duration is how long it will appear.

#6. What are “control navigation” and “touch navigation”?

Please provide a screenshot of what you are referring to.

#7. I experimented and put in just 2 images for a slider. Why are there 2 square buttons (one white and one red) on top right of the image when it fades out and the other image fades in? These 2 square buttons are seen only during the transition. How do I get rid of them?

Please provide a screenshot of what you are referring to.

Also please provide your URL.

Thanks!

#8. I tried to place a slider right on top of a page. But there is a blank space between the top edge and the slider. Likewise between the bottom of the slider and my next element (a headline). I want this headline to sit right at the base of my image in the sliders. How do I get rid of the blank spaces on top and below of a slider? I tried looking at all the margin & padding of the section/row/column where the slider is – they are all 0px. I guess it’s the default design and built-in margin of a slider?

[iamwithUParticipant]

This reply has been marked as private.

[iamwithUParticipant]

This reply has been marked as private.

[iamwithUParticipant]

This reply has been marked as private.

[JoaoModerator]

Hi There,

Sorry I missed your 8th question.

Those white and red buttons are your control navigation, turn it off and they will disappear.

Also, I notice some strange redish box below your logo, so please add the following code to Appearance Customizer Custom CSS

.x-flexslider-shortcode-container {
    
    margin: 0 !important:
}

I don’t see a blank space, but see if it disappear once you add the code above, if it still there, please inform which browser and device you are using while experiencing the issue.

Thank you.

[iamwithUParticipant]

Hi Joao,
What about the “touch navigation” option – what is that for?

I inserted the code as advised. But there’s still some space on top and below the slider. I’m using Mac laptop, Safari browser. Apple iPad and Apple phones.

Also, didn’t notice the reddish box. Is that the background image for the navigation band on the left (where my menu bar is)?

[ChristianModerator]

Touch navigation is for mobile so you can slide the slider instead of tapping the arrow navigation.

I don’t see the space above and below your slider.

To remove the reddish box, please try changing the code give in the previous reply to

.x-flexslider-shortcode-container {
    margin-bottom: 0 !important;
}

See attachment

If that will not work, it is most probably you missed copying a closing bracket so the CSS doesn’t work, in that case, please hire a developer to fix the code for you as this would be getting into custom development which is outside the scope of our support.

Thanks.

Attachments:

You must be logged in to view attached files.

[iamwithUParticipant]

Thanks Christian for the prompt reply. It worked!

I didn’t see any reddish box at my end, strangely. But your code removed the blank space at the bottom of my slider. Well done!

I surmise the learning point (for someone like me who do not know css) is that there must be a semi colon at the end before the curly bracket…

[Paul RModerator]

You’re welcome! 🙂

[iamwithUParticipant]

Would you be so kind to check if you still see a reddish box? I guess it’s the background color, which I changed to rgb 0.0,0 for the column, row and section.

I tried to remove the margin on top of the slider by inserting css like yours above:
.x-flexslider-shortcode-container {
margin-top: 0 !important;
}

But it didn’t work. Can help me to remove the extra space between the slider and the top of the screen on the desktop? Likewise, on mobile screens, there is also some blank space between the slider and the nav bar (on top). Appreciate it.

[Rue NelModerator]

Hello There,

I do not see any reddish box. To remove the space on top of your slider, please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.home.x-boxed-layout-active .entry-wrap {
    padding-top: 0;
}

Hope this helps. Kindly let us know.

[Author]

Posts