Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1237435

    Stuart
    Participant

    Hi, I have a slider on my site home page.

    Is there a way to prevent it overflowing past the bottom of the screen? On a large desktop, this is ok, as its height is restricted to 1000px. However, on a laptop (1920 x 1080), it overflows significantly past the bottom of the screen. As the viewport width is reduced to smaller sizes, it responsively resizes correctly and does not overflow.

    Grateful for your assistance.

    Many thanks!

    #1237441

    Christopher
    Moderator

    Hi there,

    Please set slider layout to ‘Full screen’, disable custom grid size and .masthead in containers field.

    Hope it helps.

    #1237606

    Stuart
    Participant

    Thanks for this. I was actually hoping to have it always at a height of, say, 75% of the viewport. It looks like I just need to change the media query where the ‘notebook’ break point is set at 1024px. I need some way to set this value higher, so that it breaks to notebook view at 1920px. Is there a way to do this?
    Thanks again!

    #1237644

    Christopher
    Moderator

    Hi there,

    Slider can’t change its height to 75% depending on screen size. Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

    You can set static height for specific screen size.
    Please add following code in Customize -> Custom -> Global CSS :

    @media (max-width:1024px){
    div#rev_slider_1_1_wrapper, div#rev_slider_1_1 {
        height: 475px !important;
    }
    }

    Hope it helps.

    #1238928

    Stuart
    Participant

    Thanks! For anyone else stumbling on this thread, this worked with the following settings:
    * changed ‘height’ to ‘max-height’ (this way the entire width of the slider is displayed as the viewport width is reduced); and
    * placed this CSS code in the Custom CSS section of Revolution Slider (it does not work if placed in the global CSS section of cornerstone).

    Thanks again for your fantastic support!

    #1238951

    Christopher
    Moderator

    You’re welcome.