[ziggybriParticipant]

My site is http://safebabybmt.paragondsi.com/. I am quite familiar with the Revolution Slider plugin, having used it on several other websites previously. However, for some reason this version of Revolution Slider will not allow me to size my images properly.

Typically, I would create an image in the desired slider size, upload it to the site, and use it as a “cover” background image in a slide so that each slide’s image is shown in the full width and height of the slider. In other words, I prefer my images to reach the edge of the slide, so there’s no background shown.

The default Rev Slider size is 960 x 350 for the X icon theme. When I create an image with these dimensions, and create a slider with these dimensions, it still won’t allow me to use the image as a “cover” in the correct size- it cuts off the bottom portion of the image. Please view the slider on my homepage as an example of what’s going wrong.

How can this be fixed?

[NicoModerator]

Hi There,

Thanks for writing in.

Try adding this in your Customizer’s Custom CSS:

//this will increase the container of the slider

#x-content-band-3 .x-container.width{
width:100%
}

.rev_slider_wrapper{
height:350px;
} 

.rev_slider{
height:350px;
}

Let us know how it goes. Thanks.

[ziggybriParticipant]

Hi,

No, it still didn’t work, sorry. The bottom of the slider image keeps getting cut off.

[ZeshanMember]

Hi there,

The size of your slider is 1200×350 pixels (see: http://prntscr.com/77cga7) while your images are 960×350 pixel (see: http://prntscr.com/77cgna). That is the reason your image is getting cut off from the bottom. In this case, you can either increase your image’s width to 1200×350 pixels or reduce the width of your slider to 960px.

Thanks!

[ziggybriParticipant]

Interesting, my slider settings are set to 960 x 350 from what I can see. Is there somewhere I can modify the slider wrapper?

[Rue NelModerator]

Hello There,

Please try to edit your slider and use the fixed layout. Set your width and height to your desired 960×350 size. http://prntscr.com/77kjhn

Having this way, your images will not be cut off because it just fits the slider wrapper. If you want to have a responsive slider, you probably need to increase the sizes of your images to more that 1200×350.

Hope this helps. Kindly let us know.

[ziggybriParticipant]

Thanks, that worked. My only concern is- will having it as a “fixed” slider mean that it will not resize correctly on mobile devices?

[ZeshanMember]

Hi there,

The better solution here would be to use following CSS code under Custom > CSS in the Customizer:

div#rev_slider_4_1_wrapper {
  max-width: 960px;
}

Thanks!

[ziggybriParticipant]

Thank you, I ended up just making my images bigger and keeping the slide responsive. I appreciate the help!

[NicoModerator]

Thank you for understanding.

Have a great day! 🙂

[Author]

Posts