Testimonials Functionality

Hi,

I'm using the testimonial functionality to show real estate projects, so the idea is that the visitor can click the square images to go to the different projects.

As you can see in the image attached, I just included in the first top left green image an <a> tag but unfortunately it didn't work as I expected. Of course the <a> tag works, but the css layout doesn't. As soon I included the <a> tag, the image doesn't fit ok anymore, and in the way that I change the browser size, the issue is more obvious.

How can I fix it? I mean, that the images fit ok with the <a> tag included?

Thanks a lot!

Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it? It is a lot easier for us to diagnose issues when we have a live site to examine.

Sure sorry I forgot that: http://www.suviviendainternacional.com/ ... a-medellin

I'm not very good with css but trying to figure out I included this class inside each square image:

.madImg {
display: block;
width: 50%;
margin: 0;
}

so, inside the html this is the code:
....
<a href="/2015/proyecto-bulevar-del-alcazar-apartamentos-medellin"><img src="/2015/images/proyectos/proyecto_apartamentos_alcazar.png" alt="Bulevar del Alcázar Apartamentos" class="madImg"</a>
....

and it works, but:
1 - JUST with the <img> AFTER the <blockquote> tag
2 - At mobil there is a little bottom space in each image

What do I missing to fix both of the above issues? (at least the first one?)

Thanks!

Hi

You've done it This is exactly how this should be resolved. Specific HTML structure is necessary to achieve such look.

Can You provide a screen from mobile ? I can see it fine when I check.

Sorry for the quality of the picture, but the issue happens when the title text uses 3 lines, so the whole content go down a little bit, see the difference on space at the bottom between the first one image and the second one..

I don't want to be a pain in the ass because it doesn't look bad, it's just I am obsessed with aesthetics, so any suggestion?

Thanks!

Hi

Try add this code to override.css

Code: Select all

.gkTestimonials > div > div > a,
.gkTestimonials > div > div > blockquote {
    overflow: hidden;
}