Testimonials slider title cut off bottom on iPad Mini

[mmotif]

The title header for my testimonial slider is cut off at the bottom for characters like y,p etc – please see screenshot. This only happens on my iPad mini. Desktop and iPhone are OK.
I looks like you’re using h3 for this title. My h3 is set to 28px.

Thanks
Andre

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

can you provide us the link so we can check?

-Rui

[mmotif]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Hi,

Add the code below to your custom css option.

h4.spb-center-heading span:before, h3.spb-center-heading span:before, h4.spb-center-heading span:after, h3.spb-center-heading span:after {
margin: 10px -10px!important;
}

h3.spb-heading.spb-center-heading {
line-height: 15px!important;
}

After this clear the cache and try again.

-Rui

[mmotif]

That solved the problem on the iPad, but created a new one on the iPhone, see image.
Without that code it displays fine.
However, just so you know, I also use the following CSS code for the iPhone to eliminate the wrapping problem of the testimonial title which I found in some other thread. Without this fix, the title is only a single line and doesn’t wrap:

@media only screen and (max-width: 767px) {
h3.spb-center-heading, h4.spb-center-heading {
white-space: normal;
line-height: 160%!important;
}
h4.spb-heading span:before, h4.spb-heading span:after, h3.spb-heading span:before, h3.spb-heading span:after, h4.lined-heading span:before, h4.lined-heading span:after {
top: 50%;
}
}

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code also:-

@media only screen and (max-width: 479px) {
h3.spb-heading.spb-center-heading{
line-height:30px !important;
}

h4.spb-center-heading span:before, h3.spb-center-heading span:before, h4.spb-center-heading span:after, h3.spb-center-heading span:after {
margin: 0px -10px!important;
}
}

Thanks
Mohammad

[mmotif]

Thanks again, that fixed it.
One more question with regard to the testimonial slider on the desktop.
I’d like the slider area to stay fixed and not resize depending on the lines of text, as this then moves the whole page up and down. I found this code in another thread:

.testimonial.flex-active-slide {
min-height: 190px !important;
}

.alt-bg.spb_testimonial_slider_widget {
padding-bottom: 1px;
}

But it doesn’t work a 100%. It only keeps the area fixed after the longest text has been displayed. The initial size is shorter and no matter what I set as min-hight it’s doing it.

Thanks

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.testimonial{min-height:200px !important;}

Thanks
Mohammad

[mmotif]

Sorry, but it’s still moving. After the first testimonial is displayed it moves up a few pixels and then stays stable for displaying repetitively.
So, it’s kind of the initial size that’s the problem.
Thanks

[Mohammad – SUPPORT]

Hi,
Please provide me specific page url and attach a marked screenshot image.
Thanks
Mohammad

[mmotif]

It’s this link http://staging.marketmotif.com/about-us
You’ll see it when you first got to the page.

[Rui Guerreiro – SUPPORT]

Hi,

Try to add the code below to your custom css option.

.alt-bg.spb_testimonial_slider_widget {
height: 330px!important;
}

-Rui

[mmotif]

That did it!
Thanks Rui.

[Mohammad – SUPPORT]

Hi,
You most welcome. Thanks Rui.
Mohammad