Slight design adjustments

Develop, Build & Integrate CMS Development
1

Hi,

I have a few small things that I would like to change in a module template i’m using.

Currently the Modal images are rounded, how do I remove this and resize them?

Also, how do I change the size of the clickable are that appears when I hover over the image?

Thanks in advance!

Code 1-01.jpg
Code 1-01.jpg1859×1125 386 KB

Code 2-01.jpg
Code 2-01.jpg1859×1125 208 KB

2

@CG_Alex - We can give you a much more detailed and accurate solution if you can provide a preview link to the page so we can play with the CSS a bit.

3

Hi @tjoyce

How do I do that? sorry I am quite new to HubSpot!

4

@CG_Alex - no problem, when you are editing your page (not the template) on the left side there is an “eye” icon, click that link to preview and paste that link into here.

5

@tjoyce - thank you!

http://www.convergencegroup.co.uk/meet-the-team?hs_preview=unPQEbVF-6019174899

I will be using a copy of this module for a different page purely for the modal functionality, thats why I’m removing the rounding of the images and changing the sizes of them.

6

Thanks @CG_Alex - To remove the circle on the image, you could drop this css into your css file:

div .team-member-wrapper img {
 border-radius: 0;
}

and you can expand on that to make them bigger with:

div .team-member-wrapper img {
 border-radius: 0;
 max-width: 60%;
}

I’m not sure what you mean by making the clickable area bigger because, when I hover the image, there is a large surface area.

If this answer helped, please, mark as solved :grinning_face_with_smiling_eyes:

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

Drop by and say Hi to me on slack.

7

@tjoyce brilliant that is perfect thank you!

In repect to the size changes, I wanted to make the box that appears when you hover over the image smaller if possible (There wont be as much information in the new modules)

8

thanks for the clarification @CG_Alex - to decrease the size of those boxes, you can add the following CSS

.team-member-wrapper.team-half {
 padding: 80px;
}

If this answer helped, please, mark as solved :grinning_face_with_smiling_eyes:

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

Drop by and say Hi to me on slack.

9

Perfect, thank you for all your help @tjoyce