Tagged: 

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • February 27, 2015 at 8:43 am #403247
    Jasmer

    Hi guys,

    When viewing on an iPhone 6 the “Large Testimonials” element is not wide enough. It looks pencil thin. I need to widen it so it fills up the page horizontally. This is very difficult to read and too much scrolling. Any ideas how to deal with this ?

    Thank you

    February 28, 2015 at 3:00 am #403786
    Andy

    Hey Jasmer!

    try to increase width:

    @media only screen and (max-width: 768px) {
#top .avia-slider-testimonials.avia-testimonial-wrapper .avia-testimonial-row {
width: 150%;
left: -80px;
}}

    adjust as needed.

    Regards,
    Andy

    February 28, 2015 at 7:33 am #403803
    Jasmer

    Hi Andy,

    This creates additional problems: (see next post for links)

    1. In portrait view the arrows are on top of the text. HOWEVER I LIKE the width of the text here.

    2. In landscape view the text runs of the page to the left.

    The only line I changed was from 768px to 767px because I had some other code that said 767 so I wanted to keep it uniform.

    Thank you!

    February 28, 2015 at 7:33 am #403804
    Jasmer
    This reply has been marked as private.
    March 2, 2015 at 6:04 am #404289
    Rikard

    Hi!

    Could you try and play around with the values until you find something you like, something like this maybe:

    @media only screen and (max-width: 767px) {
#top .avia-slider-testimonials.avia-testimonial-wrapper .avia-testimonial-row {
width: 120%;
left: -40px;
}}

    Regards,
    Rikard

    March 3, 2015 at 8:13 am #404982
    Jasmer

    Hi Rikard!

    Thank you, but it doesn’t quite work. I played around with the CSS and it just doesn’t work properly. (see screenshots below)

    I think the Large testimonials does not work well on mobile. My suggestion is that the large testimonial default to something else when viewed on mobile.

    Is there CSS that will move the arrows outward? I am viewing on an iPhone 6. If we move the arrows wider will it look ok in an iPhone 4 or 5? Android?

    I think this element needs a fix? What do you think? Will Kriesi do a fix?

    Thank you for your time.

    March 3, 2015 at 8:13 am #404983
    Jasmer
    This reply has been marked as private.
    March 4, 2015 at 5:59 am #405557
    Rikard

    Hi!

    Please try the following instead: 

    @media only screen and (max-width: 767px) {
.avia-slider-testimonials .avia-testimonial-content {
width: 80% !important;
padding-left: 5% !important;
}}

@media only screen and (max-width: 479px) {
.avia-slider-testimonials .avia-testimonial-content {
padding-left: 35px !important;
}}

    Cheers!
    Rikard

    March 4, 2015 at 10:20 am #405661
    Jasmer
    This reply has been marked as private.
    March 5, 2015 at 4:01 am #406200
    Ismael

    Hey!

    What if you just remove the testimonial controls then decrease the font size a bit? Try to replace our suggestions with this:

    @media only screen and (max-width: 767px) {
#top .av-large-testimonial-slider .avia-testimonial-content {
font-size: 1em;
}

#top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
padding: 0px 20%;
}

#top .av-large-testimonial-slider .avia-slideshow-arrows a {
font-size: 25px;
}

.avia-slideshow-arrows.avia-slideshow-controls {
display: none;
}
}

    Regards,
    Ismael

    March 11, 2015 at 9:43 am #409725
    Jasmer

    I ended up using this. Is there any problem using “px” instead of “em”?

    @media only screen and (max-width: 767px) {
#top .av-large-testimonial-slider .avia-testimonial-content {
font-size: 14px;
}

#top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
padding: 0px 7%;
}

#top .av-large-testimonial-slider .avia-slideshow-arrows a {
font-size: 25px;
}

.avia-slideshow-arrows.avia-slideshow-controls {
display: none;
}
}
    March 12, 2015 at 9:52 pm #410747
    Josue

    Hi,

    No, em is equal to the document font size, which in Enfold by default is 13px so it would be the same.

    Best regards,
    Josue

    May 11, 2015 at 10:27 pm #442730
    Jasmer

    Thank you Josue!

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Testimonials Mobile Problem’ is closed to new replies.