Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • June 21, 2024 at 3:20 am #1453217
    web4smallbusiness

    Good morning

    I have just built a website for a client and whilst he is happy with the website, he doesn’t like the mobile responsiveness of the Testimonial Slider (large). On a desktop it looks great, but on the mobile, there is a large margin on either side and also the photo does not appear centred and the name is also off centre.

    I tried changing the font size for a mobile device but that didn’t seem to work.

    Is there a quick CSS code that I can add that would reduce the margin size on all the testimonials throughout the website and that would centre the image and the name.

    See below for link to website and also screenshots of the testimonial element and how they appear on a mobile device.

    Thank you very much
    Ivana

    June 21, 2024 at 12:02 pm #1453720
    Rikard

    Hey Ivana,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
  .responsive #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
    padding: 0;
  }
  #top .av-large-testimonial-slider .avia-testimonial-meta .avia-testimonial-image {
    width: 100%;
  }
  #top .av-large-testimonial-slider .avia-testimonial-meta-mini {
    text-align: center;
  }
}

    Best regards,
    Rikard

    June 24, 2024 at 9:49 pm #1458525
    web4smallbusiness

    Thank you Rikard! Greatly appreciate your help.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Mobile responsiveness of Testimonial Element’ is closed to new replies.