Viewing 30 posts - 1 through 30 (of 42 total)
  • Author
    Posts
  • #571312

    So I have a variety of different testimonials in a large testimonial slider. Some of these testimonials are quite long, some are short. When the slider shifts between testimonials of different sizes, the page compensates by shrinking or growing rapidly, which makes the rest of the page harder to read. Is there any way to make the testimonial slider just stick at the height of the longest testimonial within it?

    #571340

    Hi chartinboy!

    can you provide us a link to your site showing the elements in question please? we need to be able to inspect the elements.

    Best regards,
    Andy

    #571445

    Details in private content box.

    • This reply was modified 8 years, 2 months ago by chartinboy.
    #571498

    Hi!

    That is because of the content, but also if we add a height to it, there might be some issues of the text to be croped.
    Try use the following

    .avia-slider-testimonials .avia-testimonial-content {
    min-height: 50px;
    }

    and try allocate the number to be correct, based on your own text.
    Please do let us know if you have more questions, will be happy to assist

    Cheers!
    Basilis

    #631879

    That works fine for desktop devices, but how do I stop it from jumping up and down on smartphones?

    #632969

    Hi,

    Please add following code to Quick CSS for mobile devices

    @media only screen and (max-width: 990px) {
    .avia-slider-testimonials .avia-testimonial-content {
    min-height: 100px;
    }}
    @media only screen and (max-width: 480px) {
    .avia-slider-testimonials .avia-testimonial-content {
    min-height: 150px;
    }}

    Best regards,
    Yigit

    #634300

    Hi Yigit,

    Where do i add this code as have same problem

    .avia-slider-testimonials .avia-testimonial-content {
    min-height: 50px;
    }

    Best

    Nick

    #634307

    Hi,

    You can add that code into Quick CSS field in Enfold theme options > General Styling tab :)

    Best regards,
    Yigit

    #634335

    Thanks Yigit, worked a treat :)

    #634569

    Thank you! :)

    #634571

    Hi!

    You are welcome! We will keep the thread open to hear from the creator of this thread. If you have any other questions or issues, please feel free to start a new thread :)

    Best regards,
    Yigit

    #635128

    HI Yigit,

    This has worked on desktop version but not on mobile devices?, i see some code above in an earlier post, will this work?

    #636101

    Hi,

    Which of those codes are not working? One of the code suggested previously will only affect mobile devices. Please provide a link to the page plus a screenshot of the issue.

    Best regards,
    Ismael

    #636160

    Hi,

    The code is :

    @media only screen and (max-width: 990px) {
    .avia-slider-testimonials .avia-testimonial-content {
    min-height: 100px;
    }}
    @media only screen and (max-width: 480px) {
    .avia-slider-testimonials .avia-testimonial-content {
    min-height: 150px;
    }}

    When viewing on ipad or mobile the testimonials move content up and down but works perfectly on pc / mac

    #636702

    Hi Guys, Any update on this one ?

    #636775

    Hi,


    @harbourassist
    do you mind creating a temporary admin login and posting it here privately so we can look into it? Also, have you tried adjusting the values?

    Best regards,
    Yigit

    #637291

    Hi Yigit

    I have created you a temp login

    Regards

    Nick

    #638474

    Hi,

    Did you try to adjust the height value? The tallest testimonial item on mobile view is more than 560px. Try this:

    @media only screen and (max-width: 990px) {
    .avia-slider-testimonials .avia-testimonial-content {
    min-height: 470px;
    }}
    
    @media only screen and (max-width: 480px) {
    .avia-slider-testimonials .avia-testimonial-content {
    min-height: 560px;
    }}
    

    Adjust the value if needed. Or just make sure that all testimonial items have the same length of content.

    Best regards,
    Ismael

    #839057

    Hi Ismael. I’m having the same issue on mobile and iPad. I added the code you suggested to CSS (with my parameters of 900 pixels to cover long customer quotes)

    }
    @media only screen and (max-width: 990px) {
    .avia-slider-testimonials .avia-testimonial-content {
    min-height: 900px;
    }}

    @media only screen and (max-width: 480px) {
    .avia-slider-testimonials .avia-testimonial-content {
    min-height: 900px;
    }}

    but everything is still shifting up and down on iPad and phones. Am I doing it wrong?

    Thanks!

    Rob

    #839473

    Hi Rob,

    Try this code for the iPad instead.

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      div .av_three_fifth.avia-builder-el-59  {
        margin-left: -20px;
        width: 80%;
    }
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #839670

    Hey Vic

    Tried it in both places and on the iPad the background still jump depending on the size of the quote, making the page move up and down.

    Any other ideas?

    Thanks!

    Rob

    #840823

    Hi Rob,

    Let’s try this code, you can play with the min-height to get the best one for this screen size.

    
    @media only screen and (max-width: 1024px) and (min-width: 768px) {
        div .av_three_fifth.avia-builder-el-59 {
            margin-left: -50px;
            width: 86%;
            min-height: 450px;
        }
    }
    

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #961043

    Thanks for the great suggestions!

    While I was trying the @media only quick css, I discovered a good workaround for this issue using a color section.

    The testimonials slider we were trying to build was already inside a color section, so if you can’t put yours into a color section, this won’t apply to you (like if you want sidebar widgets to appear on that page, for example, although I don’t know you would if it’s mobile). In any case, if you can use a color section, put your testimonials slider inside the color section, then open the color section’s Section Layout > Section Minimum Height > Custom height in pixel.

    Then you can use Ctrl+Shift+M on Firefox (to get a responsive view of your site), and mess with the ‘height in pixel’ settings of the color element until it matches your tallest testimonial slider item. Just toggle the “device selected” at the top of the viewport and it tells you the exact pixel dimensions of whatever device you’re working with. This prevents the rest of the page on mobile from jumping up and down as the slider, once the height you select is taller than the max height of how the color section with testimonials slider inside renders on the device chosen for it in Screen Options. I did end up having to remove some of the longer testimonials, though, as it was just too much variation in height on mobile, plus using the html/Text editor to make testimonials’s font sizes smaller (to reduce variation in section height) ended up causing the testimonials slider to stop rotating. (During editing, I just open up 4 or 5 tabs of the one page I’m working on and set each one to a different device view so I can edit the page in one window, then view how the changes render on the devices in the other window. PS to reload all tabs at once in Firefox, right click on a tab and click “Reload All Tabs,” or, even faster, [Windows OS] use Alt+D (selects location bar), then hold Shift and hit Tab twice (selects tab), then hit Shift+F10 (opens right-click menu from keyboard), and hit a. Anyway, that saves me tons of time clicking, etc. during edits).

    The different versions of my website’s page, each for a different device, is so easy to work with once I realized I can just duplicate whatever element I’m working with (a color section, let’s say), go to Screen Options > Element Visibility, and pick which screen size I’m working with for that one. So I’ll have three or four duplicates of the same avia element, each one with settings a little different for mobile, mobile landscape / tablet portrait, tablet landscape, and full desktop so they look great on that device.

    Hope this is helpful to someone. Enfold rocks!

    #962012

    Hi willmfraz,

    Thank you for such detailed instructions :)

    Glad you got it working for you and that you enjoy using Enfold! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1056787

    I was able to stop the jumping testimonial slider on mobile by using this code, ajusting the figure for px until it worked.

    @media only screen and (max-width: 767px) {
    .avia-testimonial-wrapper {
    height:500px !important;
    min-height:500px !important;
    }
    }

    Here comes my question:
    I would like to get more space for the text. The arrows are taking up to much of it in the mobile version.
    How can I reduce the size of the arrows, so there is more space for words? Smaller fontsize would also help.

    Thanks!

    #1056807

    Hi WiMistres,

    Could you please give us a link to your website, we need more context to be able to help you.

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    #1056814

    Please compare the slider in desktop and in the mobile version. The german language has sometimes long words, so they are using up a whole line once there is onliy little space as in the mobile version. The link follows in private content.

    #1057176

    Hi WiMistres,

    Please remove the code you added fixing the height and try the code below:

    
    @media only screen and (min-width: 768px) {
        div .av_three_fifth.avia-builder-el-55  {
          width: 100%;
          margin-left: 0;
        }
    }
    @media only screen and (max-width: 479px) {
      .responsive #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
          padding: 0px 30px;
      }
      #top .av-large-testimonial-slider .avia-slideshow-arrows a {
        margin: 20px -20px 0;
    }
    

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #1057822

    Thank you, Victoria,
    that was exactly what I was looking for.

    #1057897

    Hi WiMistres,

    Glad we got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

Viewing 30 posts - 1 through 30 (of 42 total)
  • The topic ‘Stop testimonials slider from jumping around’ is closed to new replies.