Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • August 24, 2016 at 5:01 pm #677124
    stephtaryn

    I’m trying to set the text/images of the testimonial grid content so it’s aligned vertically within it’s grid box. How can I do this? I’ve tried setting a custom class in the Testimonials element as well as in the individual testimonial elements within that and setting different css codes in the Enfold Child custom CSS box but nothing works…

    August 25, 2016 at 9:12 am #677404
    Vinay

    Hey stephtaryn,

    Would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)

    Best regards,
    Vinay

    August 25, 2016 at 10:21 am #677421
    stephtaryn

    Hi Vinay,
    Here’s the link: https://www.dropbox.com/s/5n33l8z8ykrr47d/Screen%20Shot%202016-08-25%20at%2009.15.56.png?dl=0

    Thanks,

    Steph

    August 29, 2016 at 2:44 pm #678929
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .avia-testimonial-content {
    display: table-cell;
    vertical-align: middle;
}
.avia-testimonial_inner {
    display: table;
}

    Best regards,
    Yigit

    August 30, 2016 at 9:56 am #679297
    stephtaryn

    Hi Digit,

    Thank you – I tried this but it made the content move to the left in each box and still not vertically centered.
    Do you have anything else I can try?

    September 1, 2016 at 3:15 pm #680766
    Yigit

    Hi,

    Please try using only following code

    .avia-testimonial-content {
    display: table-cell;
    vertical-align: middle;
}

    Best regards,
    Yigit

    September 1, 2016 at 3:58 pm #680797
    stephtaryn

    Hi Digit,

    This doesn’t work as it makes the content in each box display to the left inside the box. How do I send you a screenshot? Or can you just log in and see what the issue is?

    September 1, 2016 at 3:59 pm #680798
    Yigit

    Hi!

    You can upload your screenshots on imgur.com or Dropbox public folder and post the links here or you can post logins here privately, your call :)

    Cheers!
    Yigit

    September 1, 2016 at 4:14 pm #680805
    stephtaryn

    Hi Yigit, I’ve added you as a user so you can login to Admin and take a look.

    September 1, 2016 at 4:28 pm #680812
    Yigit

    Hi!

    I changed the code to following one 

    .avia-testimonial-content {
    display: table-cell;
    vertical-align: middle;
    min-width: 260px;
}
body div .avia-testimonial { 
    vertical-align: middle; 
}

    Please review your website now

    Regards,
    Yigit

    September 1, 2016 at 4:31 pm #680817
    stephtaryn

    Hi Yigit,

    Thanks for trying this but the testimonials with stars are still not aligned vertically central. They are the main ones that stand out as aligned wrong so are you able to sort that?

    September 1, 2016 at 4:42 pm #680830
    Yigit

    Hi!

    They look centered on my end. Please flush browser cache and refresh your page a few times

    Best regards,
    Yigit

    September 1, 2016 at 4:48 pm #680837
    stephtaryn

    Ah I see now! They are vertically aligned in the centre thank you!

    Although they are now a bit to the left and not aligned horizontally central. This is even more noticeable when viewing on a mobile – have a look…

    September 1, 2016 at 4:51 pm #680838
    Yigit

    Hey!

    Please add following code to Quick CSS as well

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

    Cheers!
    Yigit

    September 1, 2016 at 4:59 pm #680845
    stephtaryn

    Hi Yigit,

    That solves the problem on a mobile screen but doesn’t on iPad or Desktop – they are still not aligned horizontally central but to the left.

    Can it not somehow just be aligned centrally no matter what the screen size? There are so many different screen sizes from laptops to large iMacs to iPads etc. that we can’t add CSS code for every single scenario can we?

    September 5, 2016 at 2:57 pm #682191
    Yigit

    Hi,

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 1024px) and (min-width: 481px) {
.avia-testimonial-content {
    min-width: 100px;
}}

    Best regards,
    Yigit

    September 5, 2016 at 3:25 pm #682219
    stephtaryn

    Hi Yigit,

    This doesn’t fix the issue. It seems to be the ones with the stars that keep appearing to the left of each box.

    September 5, 2016 at 3:26 pm #682222
    stephtaryn

    Can you try adding all your suggested css codes in as you have access and then let me know once you have solved it (if you can solve it!)?

    September 8, 2016 at 4:28 am #683459
    Ismael

    Hi,

    We added this code in the Quick CSS field:

    .avia-testimonial-content {
    display: block !important;
}

    Please remove browser cache or hard refresh the page.

    Best regards,
    Ismael

    September 12, 2016 at 10:01 am #684961
    stephtaryn

    That’s now perfect Yigit. Thank you so so much for your help!

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘Testimonial grid vertical align content’ is closed to new replies.