Hola! ¡Tenemos nuestra Comunidad en Español!

Modal changes

SOLVE
Occasional Contributor

Hi,

 

Im trying to change the size of the clickable area for the modal image on this page (to fit around the logo and the text). As you may notice also, the popup image is also too big and crops most of it out.

 

https://www.convergencegroup.co.uk/meet-the-team-3?hs_preview=WlVXdZUd-6065978604

 

How do I change these?

 

Code 1.png

1 Accepted solution

Accepted Solutions
Regular Advisor | Gold Partner | HubSpot Certified Trainer

@CG_Alex - The css you want to play with to change the box trigger size is in the following screenshot

tc.png

 

 

It can be tricky sometimes to inspect values of a hover css property so, when you're in inspector, toggle on the hover to help yourself out... see the following screenshot:

 

 

hover.png

3 Replies 3
Regular Advisor | Gold Partner | HubSpot Certified Trainer

@CG_Alex - Did you get the clickable area working? I see a large clickable box when you hover that seems to be working fine.

As for the image... If those are going to all be logos, I would ditch the background-size:cover and go for contain instead.

.o-modal__team-image {
    height: 700px;
    background-position: 50% 50%;
    background-size: cover;
    background-size: contain;
    background-repeat: no-repeat;
}

If this answer helped, please, mark as solved Smiley Very Happy


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

Reply
0 Upvotes
Highlighted
Occasional Contributor

@tjoyce - Hi, the clickable area is working again, but I'd like the actual area of the clickable box to me smaller (just big enough for the logo and the name to fit into). Im not sure if I have put your new code in the right place for the pop up image size? I can't seem to get it to apply properly.

Reply
0 Upvotes
Regular Advisor | Gold Partner | HubSpot Certified Trainer

@CG_Alex - The css you want to play with to change the box trigger size is in the following screenshot

tc.png

 

 

It can be tricky sometimes to inspect values of a hover css property so, when you're in inspector, toggle on the hover to help yourself out... see the following screenshot:

 

 

hover.png