Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1417227

    Hey, QQ here. I’m working on a site, and need help with CSS on this page: https://mygolfcoaches.com/coaches-rich-abele/

    At the bottom of the page, I want to replace the background of the testimonials with an image: https://mygolfcoaches.com/wp-content/uploads/2023/08/horizantalgolfbackground.jpg

    I can find the element that I need to target when doing inspect, but its not translating to when I try to actually add the CSS code to the back end. Can you please help me here?

    Thank you so much as always.

    P.S. – on mobile, it seems like there is overlap between the testimonial text and the large circles that allow you to rotate through the testimonials. Is there a way that I can make the circles smaller? Or move them a bit farther away from the text?

    • This topic was modified 7 months, 3 weeks ago by Dzimnikov.
    #1417252

    Hey Dzimnikov,
    Thank you for the link to your site, it looks like the testimonials are in a color section that is light green now, have you tried adding the background image to the color section, or do you want the background image limited to the testimonials only with the light green also showing?
    To make the arrows smaller on mobile devices try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 500px) { 
    #top #testimonialtemp .av-slideshow-ui.av-loop-endless .avia-slideshow-arrows > a, #top #testimonialtemp .av-slideshow-ui.av-loop-manual-endless .avia-slideshow-arrows > a, #top #testimonialtemp .av-slideshow-ui .avia-slideshow-arrows.av-visible-prev > a.prev-slide, #top #testimonialtemp .av-slideshow-ui .avia-slideshow-arrows.av-visible-next > a.next-slide {
    	    width: 30px;
    	    height: 30px;
    }
    #top #testimonialtemp .av-control-minimal .avia-slideshow-arrows a:before {
        line-height: 30px;
    }
    #top #testimonialtemp .av-large-testimonial-slider .avia-slideshow-arrows a {
        font-size: 20px;
    }
    }

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1417263

    Yes, I would like the background image limited to just the testimonial area, with the light green around it.

    Will try the CSS code for the arrows shortly.

    Thank you so much!

    #1417267

    Hi,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #testimonialtemp .avia-testimonial-wrapper {
      background: url('https://mygolfcoaches.com/wp-content/uploads/2023/08/horizantalgolfbackground.jpg');
      background-size: contain; 
      padding: 50px;
      margin: 0;
    }
    #testimonialtemp .avia-slideshow-arrows a {
      transform: translateY(150%);
    }
    #testimonialtemp .avia-testimonial-content.av_inherit_color p,
    #top #testimonialtemp .avia-testimonial-wrapper .avia-testimonial-name {
      color:#fff;
    }
    #top #testimonialtemp .avia-slider-testimonials.av-control-minimal-dark .avia-slideshow-arrows a {
        color: #fff;
    }
    #top #testimonialtemp .av-control-minimal-dark .avia-slideshow-arrows a:before {
        border-color: #fff;
    }

    I assumed that you wanted the text and arrows white also so I included that css, this is the expected results:
    Enfold_Support_3072.jpeg
    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1417277

    Hey, it looks a lot better, but still a few kinks.

    Desktop: the left arrow is indented more than the right one. Is there a way to even that out?

    Mobile: Same issue as above with the arrows. The text is too narrow… and the review itself doesn’t align vertically with the name of the person who left it.

    Thank you so much for all your help!

    #1417280

    Hi,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #top #testimonialtemp .avia-slideshow-arrows a.prev-slide {
    	left: -2px;
    }
    @media only screen and (max-width: 500px) { 
    	.responsive #top #testimonialtemp .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
    	    padding: 0px 30px;	
    	}
    }
    
    

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.
    This is the expected mobile results:
    Enfold_Support_3078.jpeg

    Best regards,
    Mike

    #1417289

    That worked super well. Thank you so much!

    #1417313

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘CSS Code for editing testimonial widget’ is closed to new replies.