NITRO Slide issues

[cwlsmith]

Hello,

So I’m having a problem with the NITRO WordPress theme. Specifically the main slider on the home pages.

When I put pictures in, big or small, using just the fade and cycle slider option, the picture moves itself to the left on computer screens.

Is there a specific size that pictures in that slider need to be so that it JUSt fades, and the pictures don’t slide to the left before fading?

[7Theme Support]

Hi,

the moving pictures are the effect of the slider, have you not seen the demo?

If you want, you can add this code to WP Admin -> Appearance -> Theme Options -> General -> Extra CSS Content:

.cycle_element {
background: none !important;
}
#cycle_header img {
opacity: 1 !important;
max-width: 100%;
}

This will prevent the moving pictures and show the uploaded images in the original size.

[cwlsmith]

Ah yes. That was my bad. That worked.

Also, I noticed on the demo, that the slide itself is a lot smaller than the one in the theme itself.

How can I make the slider smaller from top to bottom like in the demo, and at the same time, how can I center the images vertically and horizontally inside the new size of the slider?

Thanks!

[7Theme Support]

Hi,

normally the slider is always up to the sizes of the images in the slider, as bigger the images as bigger the slider. To center the images, you can add size code to custom css content in the theme options:

#cycle_header img
{
margin:0px auto;
}

To the fact we’ve worked with background images in the slider we’ve not centered the images by default…

[cwlsmith]

You’re right. I changed the height of the pictures and the slide accommodated.

One more issue however: Using the code you provided to center the images, when the site is looked at on a mobile device, and is in portrait orientation, the pictures are distorted and scrunch up rather than show at full width. When the device is in landscape orientation, the pictures are fine. They are just distorted in portrait.

What can be done to fix this?

[7Theme Support]

Hi,

you can try to set the height to “auto”:

WP Admin -> Appearance -> Theme Options -> General -> Extra css content:

#cycle_header img {
height:auto;
}

[cwlsmith]

That SORT of works. It helps the pictures not be scrunched, but now, the slider itself is blown up.

See picture here: http://imgur.com/RtchLda.jpg

The black is the slider

[cwlsmith]

Any help?

[7Theme Support]

Hi,

sorry, dont saw your reply.

The problem with the height of the slider is because the slider normally is bigger, for the animation in the slider.

We can try to write some lines of javascript code to solve your problem. As soon we’ve found a solution i will post it here.

[cwlsmith]

Checking back in.

[7Theme Support]

Hi,

still working on it, code is finished, but have have to test it with the theme…

[cwlsmith]

Roger. I appreciate it!

[7Theme Support]

Hi,

please insert this code in WP admin – >Appearance -> Theme Options -> General -> EXtra JAVASCRIPT Content:

jQuery(window).resize(function() {
var sh= jQuery('#cycleslider').find('img').height();
jQuery('.slideshow_cycle').height(sh).css('min-height', sh+'px');
});

This will solve your problem

[Author]

Posts