Center responsive slider + keep height fixed and responsive

Support
#1

Hi there. On my front page I use the responsive slider, which I want dead center on any media. I would also like to add a button fixed to the button of the page. The button should not jump up and down subject to the number of characters in the current slide of the responsive slider. Can you help me with the correct css, please?

#2

Hi there,

Thanks for writing in.

That’s a bit complex, it’s like you’re trying to flexible and not flexible at the same time :slight_smile:

Would you mind providing your site’s URL that has this slider? I like to see what’s happening there first :slight_smile:

And with the button? You mean a button outside the slider? It’s because you can’t just put it on the bottom of the page when it’s belong to the slider.

Thanks!

#3

Hi there. Take a look at nblund.com. I am searching for a responsive way of defining the max height of the section / element containing the responsive slider. The button would just be a link for scrolling down - not related to the responsive slider at all. Thanks.

#4

Hi There,

The button can be like this:

<a href="#x-section-2" class="x-slider-scroll-bottom above bottom center">[x_icon type="angle-double-down"]</a>

I can see you are using vh units on section 1 height. That is already responsive. See this: https://www.w3schools.com/cssref/css_units.asp

#5

Hi there. So I thought I fixed the bouncing up 'n down by adding a new 2nd section (height = 25vh) and reducing the top height of section 1 to 75vh. But that doesn’t appear to be the solution - at least not on small screen sizes: So, the issues remain:

  1. How do I style the responsive slider text dead center (vertically) in the viewport?
  2. How do I avoid the lower button on the front page bouncing up and down - depending on the number of characters in the current slide above?

Thanks.

#6

Hi there,

They are complex, I thought you’re referring to Revslider, but it’s not Revslider. Please utilize Revslider instead, if you continue this, it’s like recreating the features that are already there for Revslider.

Thanks.

#7

Hi there.

But I already did try with revolution slider - in my experience it significantly increases download time. That is why I removed revolution slide and why I would like to fik it with the responsive slider.

I would have thought that we could define a fixed height for the section - subject/responsive to media screen size - which would solve the issue with the button jumping up 'n down.

I would have thought the the responsive slider element within this section could then have equal / automatic top and bottom margins to center it vertically. And finally, that you could do some magic as well with regards to vertically centering the text within the responsive slider element?

Is this a total no go?

Thanks.

#8

Hi There,

Everything looks perfect here http://nblund.com/ on my end are you still faciing the issues?

Thanks

#9

Hi there. Yes, indeed, still facing the issues. Please see attached. Thanks

#10

Hi there,

It’s because that one has no responsive capability. And if you wish to continue that way, you have to implement the responsive code through customization. It’s not a simple feature, some plugins require time to download and render when it comes to rich features. Because it can’t be done with just simple CSS. It’s all calculated through javascript libraries.

I still recommend using RevSlider plugin, with full-screen setup and a hero type slider (single slide). You can disable navigations and all other features to make sure it’s minimal. Then you can apply optimization and CDN (CloudFlare) so the loading speed will be faster.

Thanks!