Testimonials format

• 

  alepaumermkt · Member · Jan 11, 2017 at 6:21 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  eallas · Member · Jan 11, 2017 at 7:27 pm

  • Copy link

  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!

• 

  alepaumermkt · Member · Jan 11, 2017 at 7:31 pm

  • Copy link

  Great!!!! Thank You !!!!

  Can the photo appear over the testimonial?

  And remove the link from the name?

• 

  eallas · Member · Jan 11, 2017 at 8:35 pm

  • Copy link

  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;
  }

• 

  alepaumermkt · Member · Jan 11, 2017 at 8:38 pm

  • Copy link

  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

• 

  alepaumermkt · Member · Jan 11, 2017 at 8:39 pm

  • Copy link

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

  That part did not work

• 

  eallas · Member · Jan 11, 2017 at 8:39 pm

  • Copy link

  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.

• 

  eallas · Member · Jan 11, 2017 at 8:41 pm

  • Copy link

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

• 

  alepaumermkt · Member · Jan 11, 2017 at 8:43 pm

  • Copy link

  You are right
  sorry

• 

  alepaumermkt · Member · Jan 11, 2017 at 8:44 pm

  • Copy link

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

• 

  eallas · Member · Jan 11, 2017 at 9:41 pm

  • Copy link

  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;
  }

• 

  alepaumermkt · Member · Jan 11, 2017 at 10:27 pm

  • Copy link

  The names are still in color

• 

  alepaumermkt · Member · Jan 12, 2017 at 12:10 am

  • Copy link

  mmmmmm Testimonials do not look good on mobiles

• 

  thesacredpath · Member · Jan 12, 2017 at 3:36 am

  • Copy link

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

  .testimonial-entry-title a {
  	color:#000 !important;
  }

• 

  alepaumermkt · Member · Jan 12, 2017 at 12:50 pm

  • Copy link

  Perfect! Thank You!

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

• 

  thesacredpath · Member · Jan 12, 2017 at 8:08 pm

  • Copy link

  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;
  	}
  }

• 

  alepaumermkt · Member · Jan 13, 2017 at 12:44 am

  • Copy link

  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 ?.

• 

  thesacredpath · Member · Jan 13, 2017 at 4:08 am

  • Copy link

  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.

• 

  alepaumermkt · Member · Jan 13, 2017 at 12:32 pm

  • Copy link

  Thank you!

• 

  alepaumermkt · Member · Jan 16, 2017 at 3:06 am

  • Copy link

  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?