Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #368044

    Hello!

    The display is not great with the Larger Slider Testimonial on mobile. It’s two words on each line. Is it possible to change the width on mobile? Or fix this for next update!?

    Thanks!

    #368346

    Hi youyou78!

    Please try adding following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 480px) {
    strong.avia-testimonial-name { width: 40%; float: left; }}

    If that does not help, please post the link to your page where you have testimonials slider

    Regards,
    Yigit

    #368503
    This reply has been marked as private.
    #368516

    Hey!

    Please try adding following code instead

    @media only screen and (max-width: 480px) {
    #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
    padding: 0px 50px; }}

    Cheers!
    Yigit

    #368596

    Hey!

    this does not work.

    #368779

    Hi!

    Adjust the left and right padding:

    @media only screen and (max-width: 768px) {

    #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
    padding: 0px 30px;
    }
    
    #top .av-large-testimonial-slider .avia-slideshow-arrows a {
    font-size: 25px;
    }
    
    .prev-slide:before {
    text-indent: -30px;
    }
    
    .next-slide:before {
    text-indent: 30px;
    }
    }

    Remove browser cache then reload the page.

    Regards,
    Ismael

    #369003

    Hey!

    It does not work. One or two words per line and some words are cut. Same problem with Enfold demo. http://kriesi.at/themes/enfold-business-flat/#av_section_4

    Best Regards!

    #370175

    Hi!

    which mobile device are you using? try this code:

    @media only screen and (max-width: 768px) {
    #top .avia-slider-testimonials.avia-testimonial-wrapper .avia-testimonial-row {
    width: 140%;
    left: -60px;
    }
    .avia-slideshow-arrows a:before {
    right: 40px;
    }
    #top .avia-slideshow-arrows a.next-slide {
    right: -30px;
    }
    #top .av-large-testimonial-slider .avia-slideshow-arrows a:hover {
    left: -30px;
    }}
    

    After putting it in, clear browser cache.

    Cheers!
    Andy

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.