Modal changes

SOLVE
CG_Alex
Participant

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
tjoyce
Solution
Recognized Expert | Platinum Partner

@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

View solution in original post

3 Replies 3
tjoyce
Recognized Expert | Platinum Partner

@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 😄


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

 

Drop by and say Hi to me on slack.

0 Upvotes
CG_Alex
Participant

@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.

0 Upvotes
tjoyce
Solution
Recognized Expert | Platinum Partner

@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

View solution in original post