Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 24, 2017 at 4:21 pm #766265
    nsalts

    Hello,

    How can I set the testimonial element to have a set height no matter how long the text is, yet still be responsive and change according to the screen size?

    By defualt the height changes if the testimonials have different lenths and it moves the whole page.
    I set a set height to the element using CSS but it isn’t reponsive.

    Thank you

    March 26, 2017 at 7:50 pm #767020
    Victoria

    Hey nsalts,

    You can add these styles to you themes/enfold/css/custom.css:

    
#top .avia-slider-testimonials.avia-testimonial-wrapper {
    height: auto!important;
    min-height: 250px !important;
    max-height: 1000px !important;
}

    Let us know if this was helpful.
    Best regards,
    Victoria

    March 26, 2017 at 8:54 pm #767047
    nsalts

    Hi Victoria,

    Thank you for your reply.

    When I add the CSS code you suggested, the element is resposive yet it doesn’t have a set height.
    The size changes and the page moves up and down according to the lenth of testimonial.
    I need it to have a set height and change only with the resize of the page.

    Thank you,
    nsalts

    March 27, 2017 at 4:42 am #767170
    Nikko

    Hi,

    Try to make the min-height and max-height from Victoria’s code the same value, then add this below:

    
/* For ipad/tablet in portrait mode */
@media only screen and (max-width:960px) and (min-width:768px) {
  #top .avia-slider-testimonials.avia-testimonial-wrapper {
    min-height: 400px !important;
    max-height: 400px !important;
  }
}

/* For mobile devices */
@media only screen and (max-width:767px) {
  #top .avia-slider-testimonials.avia-testimonial-wrapper {
    min-height: 600px !important;
    max-height: 600px !important;
  }
}

    Just adjust the values as you see fit. HOpe this helps :)

    Best regards,
    Nikko

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