Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • June 3, 2018 at 5:41 pm #966162
    mosaic

    I’m using the following code with my grid layout testimonials:

    @media only screen and (max-width: 767px) {
    .avia-testimonial-image{
    height:100px!important;
    width:100px!important;
    float:none!important;
    clear:both!important;
    }}

    This puts the image above the testimonial but it isn’t centred. How do I centre the image?

    June 5, 2018 at 8:09 pm #967430
    Victoria

    Hey Kieran,

    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

    
.avia_transform .avia_start_animation.avia-testimonial .avia-testimonial-image {
    display: block;
    margin: 0 auto;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    June 6, 2018 at 11:01 am #967752
    mosaic

    That’s perfect! How do I make the other info centred as well? Name etc.

    June 7, 2018 at 8:14 am #968231
    Rikard

    Hi,

    Please try this as well:

    .avia-testimonial-meta-mini {
  text-align:center;
}

    Best regards,
    Rikard

    June 8, 2018 at 7:41 pm #970166
    mosaic

    Perfect, thank you!

    June 9, 2018 at 10:19 am #970361
    Rikard

    Hi,

    Glad we could help. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    February 16, 2021 at 9:04 pm #1281535
    mosaic

    Hi, this doesn’t work for Testimonial Slider (large), how can I achieve the same thing with that?

    February 17, 2021 at 10:49 am #1281630
    Nikko

    Hi mosaic,

    The CSS code should still work.
    I have checked on the testimonials page you posted in private content and could see it centered on mobile.

    Best regards,
    Nikko

    February 17, 2021 at 11:49 am #1281654
    mosaic

    Hi yes sorry it’s for a different website. Please see private content. The site is currently in maintenance mode so you’ll need to use the link to login and then the testimonials are on the homepage.

    February 19, 2021 at 6:09 am #1282121
    Rikard

    Hi,

    Thanks for that. Please try this in Quick CSS:

    @media only screen and (max-width: 767px) {
#top .av-large-testimonial-slider .avia-testimonial-meta .avia-testimonial-image {
    margin-left: 50px;
}
}

    Best regards,
    Rikard

    February 22, 2021 at 5:28 pm #1282853
    mosaic

    That worked thanks. How can I also center the text beneath the image?

    February 23, 2021 at 1:41 am #1282944
    Nikko

    Hi mosaic,

    Try adding this code inside Rikard’s code:

    #top .avia-testimonial-meta-mini {
    text-align: center;
}

    it should look like this:

    @media only screen and (max-width: 767px) {
  #top .av-large-testimonial-slider .avia-testimonial-meta .avia-testimonial-image {
    margin-left: 50px;
  }

  #top .avia-testimonial-meta-mini {
    text-align: center;
  }
}

    Best regards,
    Nikko

    February 23, 2021 at 10:16 am #1283003
    mosaic

    That has centered the text but the whole thing is off center and as the slider cycles through testimonials each title/subtitle is in a different position.

    February 24, 2021 at 8:08 am #1283310
    Nikko

    Hi mosaic,

    I have replaced the code above with this one:

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

  #top .av-large-testimonial-slider .avia-testimonial-meta .avia-testimonial-image {
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
}

    Please review your site.

    Best regards,
    Nikko

    February 24, 2021 at 1:18 pm #1283382
    mosaic

    Perfect thank you

    February 24, 2021 at 1:36 pm #1283391
    Nikko

    Hi mosaic,

    We’re glad that we could help :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘How to centre the testimonial images on mobiles?’ is closed to new replies.