[threeotenParticipant]

​Hi, I was wondering how I could go about making a custom size revolution slider in X. I am wanting it to span the max width of my boxed site but only be a couple hundred pixels in height. Is there a way to control the height?
Thanks

[ZeshanMember]

Hi there,

Thanks for writing in!

You can achieve it directly from the Revolution Slider’s settings. You can select Custom under Main Slider Settings > Slider Layout (see: http://prntscr.com/5jntic) and specify your minimum slider’s height.

Hope this helps. 🙂

Thank you.

[thepeachteacoParticipant]

This only changes the minimum height, correct? What if you want to change the maximum height?

[John EzraMember]

Hi there,

Thanks for updating the thread! Height is mostly dictated by the size of the content, based on its width. Setting a minimum width would ensure that the height won’t go below. To set the maximum height, we’ll need to use CSS. Would you mind sharing your URL so we can take a look? Please let us know the height you would like to achieve and also which slider you are targeting. Thanks!

[thepeachteacoParticipant]

thepeachteaco.com/photography

I am trying to target the slider at the top of the page, which I want to act as a single hero image. I’ll be using this concept for several pages, and I want it to look the same on each of them.

[DarshanaModerator]

Hi there,

Try adding the following CSS rule into your Customizer, Custom > CSS area and then you can try changing CSS property values to see if that matches your requirement.

.rev_slider .tp-bgimg.defaultimg {
    background-position: center center !important;
    max-height: 300px;
}

Let us know how it goes.

[thepeachteacoParticipant]

Unfortunately, this doesn’t do the trick. When I add this code and change the classes selected to a custom class I’ve added to the slide, it just makes the photo 300px, rather than making the slider 300px. This results in a gap between the bottom of the photo and the menu. See image attached.

Any other ideas I could try? I really want to figure this out.

Thanks.

[LelyModerator]

Hello There,

Please also add this CSS:

.rev_slider_wrapper, .rev_slider, .tp-fullwidth-forcer, .rev_slider .tp-bgimg.defaultimg {
    max-height: 300px !important;

}

Hope this helps.

[thepeachteacoParticipant]

This works great! Only question now is: how do I only target specific sliders to do this to? The classes we’re using now select every slider, it seems. I am using sliders on other pages as well, where I DON’T want this to take effect.

Thanks.

[ZeshanMember]

Hi there,

Do you want this change for blog/photography page only? If so, you can use this CSS code instead:

.blog .rev_slider_wrapper, .blog .rev_slider, .blog .tp-fullwidth-forcer, .blog .rev_slider .tp-bgimg.defaultimg {
    max-height: 300px !important;
}

Hope this helps. 🙂

Thank you!

[thepeachteacoParticipant]

The change will happen on multiple pages, but not on all. I need to somehow be able to select those that are needing to be 300px separately from those that do not.

[LelyModerator]

Hello There,

You can use page id like below:

.blog .rev_slider_wrapper,
.blog .rev_slider,
.blog .tp-fullwidth-forcer,
.blog .rev_slider .tp-bgimg.defaultimg,
.page-id-2 .rev_slider_wrapper,
.page-id-2 .rev_slider,
.page-id-2 .tp-fullwidth-forcer,
.page-id-2 .rev_slider .tp-bgimg.defaultimg {
    max-height: 300px !important;
}

Above CSS will work for blog page http://thepeachteaco.com/photography/ and then .page-id-2 for http://thepeachteaco.com/about/. To locate page id please check this:https://community.theme.co/kb/how-to-locate-post-ids/ just go to Pages > All Pages.

Hope this helps.

[Author]

Posts