# Modal changes

**URL:** <https://community.hubspot.com/t/modal-changes/9846>\
**Category:** CMS Development\
**Created:** [August 15, 2018, 9:33am UTC](https://community.hubspot.com/t/modal-changes/9846 "2018-08-15T09:33:43Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![CG\_Alex](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cg_alex/32/58551_2.png) [@CG\_Alex](https://community.hubspot.com/u/CG_Alex)\
**Post date:** [August 15, 2018, 9:33am UTC](https://community.hubspot.com/t/modal-changes/9846/1 "2018-08-15T09:33:43Z")

</div>

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](https://www.convergencegroup.co.uk/meet-the-team-3?hs_preview=WlVXdZUd-6065978604)

How do I change these?

 ![Code 1.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/3/8/3838dde8be6cc409a0f41196319755b174b02fa3.png)

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [August 15, 2018, 11:29am UTC](https://community.hubspot.com/t/modal-changes/9846/2 "2018-08-15T11:29:54Z")

</div>

[@CG\_Alex](https://community.hubspot.com/t5/user/viewprofilepage/user-id/67243) - 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.

```auto
.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](mailto:tim@belch.io) | [forms.belch.io](https://forms.belch.io) | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me [on slack](http://slack.belch.io/).

---

<div class="post-metadata">

**Author:** ![CG\_Alex](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cg_alex/32/58551_2.png) [@CG\_Alex](https://community.hubspot.com/u/CG_Alex)\
**Post date:** [August 15, 2018, 12:06pm UTC](https://community.hubspot.com/t/modal-changes/9846/3 "2018-08-15T12:06:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [August 15, 2018, 12:24pm UTC](https://community.hubspot.com/t/modal-changes/9846/4 "2018-08-15T12:24:41Z")

</div>

[@CG\_Alex](https://community.hubspot.com/t5/user/viewprofilepage/user-id/67243) - The css you want to play with to change the box trigger size is in the following screenshot

 ![tc.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/1/2/128f961b9418e68e488287ccea13e9f721726c3b.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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/3/4/34e0cf458311882ded9b2d970409e090a216b656.png)