Conversation
supportHi, would it be possible to add something like “height: 14vw;width: 14vw;” to the sola_t_image sola-t-round-image classes instead of fixed pixels? I am strugling with too small images on big screens and/or overlapping images on small mobile phones. And thank you for this really useful plugin! Michele https://wordpress.org/plugins/sola-testimonials/
Hi Michele. Thank you for your kind words! You could do this by going to ‘Testimonials’ -> ‘Settings’ and adding the following CSS to the ‘Custom CSS’ field: .sola_t_image .sola-t-round-image{ height: 14vw; width: 14vw; } Does this help at all?
Thanks for your quick reply! That’s what I tried, it works when I put it in Firebug but th customcss field returns excamation marks and “expected (<length>|<percentage>|auto|inherit) but found ’14vw'” and when I try something like height: 22%;width: auto; it has no effect.
Hi there. Sorry about that. Would you mind trying the following: .sola_t_image .sola-t-round-image{ height: 14vh; width: 14vw; } If the above doesn’t help, we might need to disable the JavaScript class used to resize the images.
same thing, it shows only the default image size. but perhaps my approach was completely wrong? are the images meant to shrink dependent on the viewport size?
Hi there. Would you mind sending me a link to one of the pages on your site with the testimonials on it so that I can look into this for you? The image should resize/scale according to the viewport as they are response (they’ll be smaller on a mobile device than on a desktop) – but I’d like to just try it on your website to see what you are experiencing.
sure: pyar.de it’s a work in progress, so be gentle 🙂
Hi there. I see what you mean now. Ideally you’d want less items in a row as the window scales to a smaller width – would you be okay with this? That way enough space will be available between the images and they won’t overlap.
That would be perfect, thank you so much! Do I have to change something?
Hi there. Please try the following CSS: @media screen and (max-width: 720px) { .sola_t_layout_4_container { width: 30%; } } @media screen and (min-width: 480px) { .sola_t_layout_4_container { width: 46%; } } Does this help?
Thanks, it works partially, but the idea was to either resize the pictures according to the screen size or reduce the columns. And since the image size is still a fixed value they don’t change on smaller screens.
This does work: `@media screen and (min-width: 720px) { .sola_t_layout_4_container { width: 22%; } } @media screen and (min-width: 480px) and (max-width: 720px) { .sola_t_layout_4_container { width: 30%; } } @media screen and (max-width: 480px) { .sola_t_layout_4_container { width: 100%; } }`
Hi there. So glad to hear you’ve got it working now. We’re going to add additional CSS to the plugin for different viewport sizes – sorry about this.
Hi Michele. Thank you for your kind words! You could do this by going to ‘Testimonials’ -> ‘Settings’ and adding the following CSS to the ‘Custom CSS’ field: .sola_t_image .sola-t-round-image{ height: 14vw; width: 14vw; } Does this help at all?
Thanks for your quick reply! That’s what I tried, it works when I put it in Firebug but th customcss field returns excamation marks and “expected (<length>|<percentage>|auto|inherit) but found ’14vw'” and when I try something like height: 22%;width: auto; it has no effect.
Hi there. Sorry about that. Would you mind trying the following: .sola_t_image .sola-t-round-image{ height: 14vh; width: 14vw; } If the above doesn’t help, we might need to disable the JavaScript class used to resize the images.
same thing, it shows only the default image size. but perhaps my approach was completely wrong? are the images meant to shrink dependent on the viewport size?
Hi there. Would you mind sending me a link to one of the pages on your site with the testimonials on it so that I can look into this for you? The image should resize/scale according to the viewport as they are response (they’ll be smaller on a mobile device than on a desktop) – but I’d like to just try it on your website to see what you are experiencing.
sure: pyar.de it’s a work in progress, so be gentle 🙂
Hi there. I see what you mean now. Ideally you’d want less items in a row as the window scales to a smaller width – would you be okay with this? That way enough space will be available between the images and they won’t overlap.
That would be perfect, thank you so much! Do I have to change something?
Hi there. Please try the following CSS: @media screen and (max-width: 720px) { .sola_t_layout_4_container { width: 30%; } } @media screen and (min-width: 480px) { .sola_t_layout_4_container { width: 46%; } } Does this help?
Thanks, it works partially, but the idea was to either resize the pictures according to the screen size or reduce the columns. And since the image size is still a fixed value they don’t change on smaller screens.
This does work: `@media screen and (min-width: 720px) { .sola_t_layout_4_container { width: 22%; } } @media screen and (min-width: 480px) and (max-width: 720px) { .sola_t_layout_4_container { width: 30%; } } @media screen and (max-width: 480px) { .sola_t_layout_4_container { width: 100%; } }`
Hi there. So glad to hear you’ve got it working now. We’re going to add additional CSS to the plugin for different viewport sizes – sorry about this.