Docs

[Michael P]

Hi,

I’m using Autoptimize, which loads javascript as late as possible to avoid render blocking.

This means that Revolution Slider now has a slight delay in loading, so you see the items below it for a second just before the slider loads.

The developer of Autoptimize has suggested adding some CSS to reserve some blank space for the slider, so as to avoid any jumping around. Any idea how I would achieve this?

http://www.wiperstimesplay.co.uk

Many thanks!

[Christian]

Hey Michael,

Try adding the code below in your Appearance > Customize > Custom > Global CSS

.x-slider-container.below {
    min-height: 500px;
}

Thanks.

[Michael P]

Yes, that worked – many thanks. For some reason it messed up some custom styling I had applied to the footer, but I think I’ve fixed the issue now.

Is there some particular order in which custom CSS should be applied? Changing the order of items was the only way that I could fix the issue with footer styling not being applied.

[Rue Nel]

Hello There,

Thanks for updating in!

Please keep in mind that this is the hierarchy of the stylesheets.
– Stack style.cs
– Child theme’s style.css
– Customizer’s custom css
– Cornerstone’s custom css

And then for best css practice, please have your custom css like this:

@font-face{
  // your font declarations
}

element {
  //your styling
}

#element-id{
  // your styling
}

.element-class{
  // your styling
}

@media(max-width: XXpx){
  element{
    // your styling
  }
}

Hope this helps.

[Michael P]

Thanks for the guide – really useful.

I’m re-opening this topic because I just realised that the blank space reserved for Rev Slider is showing up as a lot of excess space that’s visible on smaller mobile devices.

How would I hide this (or even better reduce the space) for iPad portrait and below?

Thanks again!

[Joao]

Hi There,

You will need to play with Revolution Slider Responsive Settings.

I would also consider hiding revolution slider for mobile and tablets and build a section that would be hidden on desktop, laptop and landscape tablets to replace it…

The reason I say that is because your design have a background with is designed with landscap proportions and if strecht to portrait it wouldnt look good.

Hope it helps

Joao

[Michael P]

Hi Joao,

I think maybe you misunderstood the request?

At the suggestion of the developer of Autoptimize, I added some custom CSS – just some blank space where Rev Slider loads – in order to hide the delay in loading. Autoptimized JS purposely loads as late as possible to avoid render blocking.

The blank space works great to hide the delay, however this means that the excess space is visible on smaller mobile devices. What I want to do is just add some additional custom css to hide the 700px of blank space on smaller mobile devices (eg iPhone). A media query of some kind I guess, but I couldn’t quite work out what it should be.

Hope that makes sense – many thanks!

[Rad]

Hi there,

Please replace this CSS

.x-slider-container.below {
    min-height: 700px;
    border: 0;
}

with this

.x-slider-container.below {
    border: 0;
    height: 0px;
    overflow: hidden;
    padding-bottom: 70%;
}

Cheers!

[Michael P]

Thanks – does exactly what I need.

[Thai]

You’re most welcome 🙂

[Author]

Posts