Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 17, 2018 at 12:54 pm #998401
    catchbudapest

    Hi,
    in order to show the testimonial images on mobiles I use the following CSS-code:

    @media only screen and (max-width: 767px)  {
.avia-testimonial-image{
height:80px!important;
width:80px!important;
float:left!important;
}
}

    But it’s not perfect: the distance between image and name is too small (see screenshot here) and on very small mobile screens it even cuts of the name.

    I would like to have the image and the name below each other (both centered).
    Is that possible?
    (here is the link to the page with the testimonials)
    (login-data in private content)

    • This topic was modified 6 years, 4 months ago by Rikard.
    August 18, 2018 at 7:20 pm #998746
    Victoria

    Hey catchbudapest,

    Can you disable caching and minification for now?

    Best regards,
    Victoria

    August 19, 2018 at 12:12 am #998818
    catchbudapest

    Hi Victoria,
    is now deactivated!

    August 19, 2018 at 1:42 am #998830
    Mike

    Hi,
    I have two solutions for you to try, this first just adds a little margin between the image and text:

    @media only screen and (max-width: 767px) { 
.avia-testimonial-row .avia-testimonial-meta .avia-testimonial-image {
    margin-right: 10% !important; 
  margin-left: 10% !important;
}

    This second solution, creates two rows, with the text below the image, and manages many different widths:

    @media only screen and (max-width: 430px) { 
.avia-testimonial-row .avia-testimonial-meta .avia-testimonial-meta-mini {
display: inline-block !important; 
text-align: center !important; 
}
.avia-testimonial-row .avia-testimonial-meta .avia-testimonial-image {
margin-left: 30% !important;
}
}
@media only screen and (min-width: 431px) and (max-width: 767px) { 
.avia-testimonial-row .avia-testimonial-meta .avia-testimonial-image {
    margin-left: 20% !important; 
    margin-right: 5% !important; 
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) { 
.avia-testimonial-row .avia-testimonial-meta .avia-testimonial-meta-mini {
display: inline-block !important; 
text-align: center !important; 
}
.avia-testimonial-row .avia-testimonial-meta .avia-testimonial-image {
margin-left: 30% !important;
}
}

    Best regards,
    Mike

    August 19, 2018 at 10:59 am #998869
    catchbudapest

    Hi Mike,

    first solution works perferctly for me.
    Thanks a lot!!

    Cheers,
    Florian

    August 19, 2018 at 2:38 pm #998919
    Mike

    Hi,
    Glad to hear, I liked the first one best too.
    Unless there is anything else we can assist with on this issue, shall we close this then?

    Best regards,
    Mike

    August 20, 2018 at 7:06 am #999180
    catchbudapest

    Hi Mike,

    yes, can be closed.

    Thanks again and best regards,
    Florian

    August 20, 2018 at 8:38 am #999211
    Rikard

    Hi,

    Thanks for letting us know, I’ll close this for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Testimonials on mobile’ is closed to new replies.