Testimonials format

• 

  thesacredpath · Member · Jan 16, 2017 at 10:14 pm

  • Copy link

  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.

• 

  alepaumermkt · Member · Jan 16, 2017 at 10:54 pm

  • Copy link

  Great!!! Thank you!!!

• 

  thesacredpath · Member · Jan 17, 2017 at 5:13 am

  • Copy link

  You are welcome.