Pro button scaling to 100% of column

[Jimenez-Peralta]

Hi team,

I’ve created two image based pro buttons on this homepage and put each in a two column row. These button scale down nicely (when scaling down the browser window) but don’t scale up when I make my browser fullscreen. I do this on an 5K iMac so you may have trouble reproducing my situation as the used images are over 2800px wide. Let me know if I need to make smaller buttons.

I was advised by colleagues to set the width of the images to 100% and I’m trying to do that but am not sure how to do that with these Pro buttons.

Thanks in advance,
Tijs

[jade]

Hi Tijs,

Thanks for writing in.

I have checked your site but I can’t seem to replicate the issue.

Is there a chance that you provide a screencast so that we can see how to replicate this issue?

Thank you.

[Jimenez-Peralta]

Hi Jade,

I made a screencast for you.
It is most noticeable in de red ‘strippenkaart’ graphic. The other images are so huge that it is harder to show the problem.

Thanks.

[rad]

Hi there,

The video is big and it stops downloading in the middle, I assume you’re referring to the images with links (the blue images with noise effect).

It’s known issue with image sizes of v2 elements and it’s already on our bug list. For temporary workaround, please add this CSS to your global custom CSS.

.x-image img {
    width: 100%;
}

Thanks!

[Jimenez-Peralta]

Hi Rad,

That indeed did the trick! Thanks.
Only downside to this solution is the fact that the site logo (Cristina Peralta in letters) looks stretched now. Any trick to prevent that from happening?

T.

[thai]

Hi There,

Please also add this custom CSS:

.hm3.x-image img {
    width: auto;
}

Let us know how it goes!

[Jimenez-Peralta]

@thai

.hm3.x-image img {
width: auto;
}

Solved the logo issue!

[rad]

Glad to hear that, cheers!