Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 15, 2023 at 4:48 pm #1401273
    Sandy

    The Testimonials element looks great on desktop, but on mobile only one to three words fit per line. So, it’s hard to read and not mobile friendly. It seems that the navigation elements force the reduced text line width to an extreme degree on mobile. Is there a workaround?

    March 16, 2023 at 11:59 am #1401360
    Ismael

    Hey Tanja,

    Thank you for the inquiry.

    The following css code should adjust the font size of the testimonial text and create more space for the content. It should also decrease the size of the arrows and adjust their position.

    @media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  #top #wrap_all .all_colors .avia-testimonial-markup-entry-content h3 {
    font-size: 18px;
    line-height: 1.4em;
  }

  .responsive #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
    padding: 0px 40px;
    font-size: 0.85em;
  }

  #av-admin-preview .av-slideshow-ui .avia-slideshow-arrows a, #top .av-slideshow-ui.av-loop-endless .avia-slideshow-arrows > a, #top .av-slideshow-ui.av-loop-manual-endless .avia-slideshow-arrows > a, #top .av-slideshow-ui .avia-slideshow-arrows.av-visible-prev > a.prev-slide, #top .av-slideshow-ui .avia-slideshow-arrows.av-visible-next > a.next-slide {
	  width: 30px;
  }

  #top .avia-slideshow-arrows a.next-slide {
    right: -20px;
  }

  #top .avia-slideshow-arrows a.prev-slide {
    left: -20px;
  }
}

    Best regards,
    Ismael

    March 16, 2023 at 1:51 pm #1401377
    Sandy

    Thank you!

    The arrows look horizontally squished, instead of uniformly smaller. Can that be adjusted so that the arrow height also is smaller?

    The ‘Name of the person to quote’ is left aligned. Can it be centre aligned to match the rest on mobile only?

    The ‘Name of the person to quote’ font is larger. Can it be made smaller?

    March 17, 2023 at 5:25 am #1401482
    Ismael

    Hi,

    To adjust the arrows, look for this line in the css above, then define the height property.

    #av-admin-preview .av-slideshow-ui .avia-slideshow-arrows a, #top .av-slideshow-ui.av-loop-endless .avia-slideshow-arrows > a, #top .av-slideshow-ui.av-loop-manual-endless .avia-slideshow-arrows > a, #top .av-slideshow-ui .avia-slideshow-arrows.av-visible-prev > a.prev-slide, #top .av-slideshow-ui .avia-slideshow-arrows.av-visible-next > a.next-slide {
	  width: 30px;
  }

    To center align the name, use this.

    #top .av-large-testimonial-slider .avia-testimonial-meta-mini {
  text-align: center;
}

    And to make the font size smaller, add this.

    #top .av-large-testimonial-slider .avia-testimonial-name {
	font-size: 1.2em;
	margin-top: 1em;
	text-align: center;
}

    Best regards,
    Ismael

    March 26, 2023 at 9:01 pm #1402568
    Sandy

    Thank you! The first item needs a tweak as the arrow isn’t visible inside the circle now that is has less height. Also, the top and outside of the circles are cut off. See screen capture.

    March 27, 2023 at 3:02 pm #1402647
    Yigit

    Hi,

    Please add the following code to the Quick CSS field in Enfold theme options > General Styling tab

    
#top .av-slideshow-ui.av-loop-manual-endless .avia-slideshow-arrows > a, #top .av-slideshow-ui .avia-slideshow-arrows.av-visible-prev > a.prev-slide {
width: 55px;
margin: 0 20px;
}

    Best regards,
    Yigit

    March 27, 2023 at 4:22 pm #1402657
    Sandy

    Thank you! That made the left circle wider. The arrows themselves inside the two circles weren’t affected. Please see screen capture.

    March 28, 2023 at 6:46 am #1402718
    Ismael

    Hi,

    The login details above are not working anymore. Did you disable the account? Please enable it again so that we can check the modifications.

    Best regards,
    Ismael

    March 28, 2023 at 3:34 pm #1402788
    Sandy

    Sorry about that. Please try now.

    March 30, 2023 at 5:59 pm #1403031
    Mike

    Hi,
    Thanks for your patience, I added this css to your Quick CSS:

    #top .av-control-minimal .avia-slideshow-arrows a:before {
    line-height: 26px;
}
.responsive #top .av-large-testimonial-slider .avia-slideshow-arrows a {
    font-size: 15px;
}

    please clear your browser cache and check.

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.