Need help? Check out our Support site, then


Testimonials format

  1. Hello, I would like the testimonials to be centered and that the clients' photos appear cut out in circles like in my site sempermarketing.com.ar
    how can I do it?

    The blog I need help with is elclubdelmareo.com.

  2. Howdy alepaumermkt!

    The following code should do the trick!

    /* Testimonials */
    .testimonial-entry{
        text-align: center;
    }
    
    .testimonial-featured-image img {
        border-radius: 100%;
    }

    Hope this helps!

  3. Great!!!! Thank You !!!!

    Can the photo appear over the testimonial?

    And remove the link from the name?

  4. So, this is what I made up. It's extensive but does the job.

    /* Testimonials */
    .testimonial-entry{
      text-align: center;
    }
    
    .testimonial-entry a:link {
      pointer-events: none;
      cursor: default;
    }
    
    .testimonial-featured-image img {
      border-radius: 100%;
    }
    
    .testimonial-entry-content {
    	position: relative;
    	top: 175px;
    }
    
    .testimonial-entry-title {
    	position: relative;
    	top: 175px;
    }
    
    .testimonial-entry-mobile-first-item-row img{
      position: relative;
      bottom: 150px;
    }
    
    .testimonial-entry-mobile-last-item-row img{
      position: relative;
      bottom: 75px;
    }
  5. Perfect the pics over the testimonials!!!!!

    The only thing thay I have left is the link in the names. Can they be removed?

    Thank you very very much for your help

  6. .testimonial-entry a:link {
    pointer-events: none;
    cursor: default;

    That part did not work

  7. You're welcome!

    The links are removed. I'm having trouble changing the color for some reason without changing all the link colors in the page. I'll send a reply once I figure it out, my apologies for the delay.

  8. If you attempt to click the names with that code in, you'll see they aren't clickable.

  9. You are right
    sorry

  10. You were a big help
    Thank you thank you thank you from Argentina :)

  11. No need to apologize! I didn't explain enough; however, the case has been solved! Here's the code to change the color to black:

    .testimonial-entry-title a{
        color: #000;
    }
  12. The names are still in color

  13. mmmmmm Testimonials do not look good on mobiles

  14. On the entry title colors for the testimonials, use the following, which adds the !important keyword.

    .testimonial-entry-title a {
    	color:#000 !important;
    }
  15. Perfect! Thank You!

    Testimonials do not look good on mobiles now.. what can i do?

  16. Hi, add the following to the bottom of your custom CSS, which will make the testimonials full width (one above the other) on screens 600px and narrower.

    @media screen and (max-width: 600px) {
    	#text-4 .testimonial-entry {
    		width: 100%;
    	}
    	.testimonial-entry-mobile-first-item-row img {
    		bottom: 100px;
    	}
    }
  17. Much better, than you!

    but still looks bad. That's how it looks from my cell phone.
    https://drive.google.com/open?id=0B--9TYRPKSByWk9FU28wU1FUY00

    In the computer are seen at different levels the images, that subtle detail can be solved ?.

  18. In the latest code I gave you, you can adjust the "bottom" value to adjust the image up and down. Perhaps increase it to 120px, or 130px and see what it looks like.

  19. Thank you!

  20. Hi again,

    The images of the testimonies are still seen at different levels.
    https://drive.google.com/open?id=0B--9TYRPKSByMWNQTHhjY24zWjA

    And in some devices are seen on the message, covering the testimony.
    https://drive.google.com/open?id=0B--9TYRPKSByLVVuNFVhaWZ6ZTg

    What can I do?

  21. We need to remove some of your CSS as position: relative doesn't work very well in this case since the number of lines of text in the testimonial content varies depending on width. Remove the following from your custom CSS

    .testimonial-entry-content {
    	position:relative;
    	top:160px
    }
    .testimonial-entry-title {
    	position:relative;
    	top:160px
    }
    .testimonial-entry-mobile-first-item-row img {
    	position:relative;
    	bottom:130px
    }
    .testimonial-entry-title a {
    	color:#000 !important
    }
    .testimonial-entry-mobile-last-item-row img {
    	position:relative;
    	bottom:75px
    }
    @media screen and (max-width: 600px) {
    	#text-4 .testimonial-entry {
    		width: 100%;
    	}
    	.testimonial-entry-mobile-first-item-row img {
    		bottom: 100px;
    	}
    }

    and then add the following at the very bottom and see what you think.

    .testimonial-entry {
    	display: flex;
    	flex-direction: column;
    }
    .testimonial-featured-image img {
    	order: 1;
    }
    .testimonial-entry-content {
    	order: 2;
    }
    	.testimonial-entry .testimonial-entry-title {
    		order: 3;
    	}
    @media screen and (max-width: 600px) {
    	#text-4 .testimonial-entry {
    		width:100%;
    	}
    }

    One note on the above is that it is not supported in older browsers, and in the case of Internet Explorer, not in IE 10 and before.

  22. Great!!! Thank you!!!

  23. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic