CMS Development

CG_Alex
Participante

Slight design adjustments

resolver

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.pngCode 2-01.png

0 Me gusta
1 Soluciones aceptada
tjoyce
Solución
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel Elite

Slight design adjustments

resolver

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 😄


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

 

Drop by and say Hi to me on slack.

Ver la solución en mensaje original publicado

0 Me gusta
8 Respuestas 8
tjoyce
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel Elite

Slight design adjustments

resolver

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

0 Me gusta
CG_Alex
Participante

Slight design adjustments

resolver

Hi @tjoyce

 

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

0 Me gusta
tjoyce
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel Elite

Slight design adjustments

resolver

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

0 Me gusta
CG_Alex
Participante

Slight design adjustments

resolver

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

0 Me gusta
tjoyce
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel Elite

Slight design adjustments

resolver

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 😄


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 Me gusta
CG_Alex
Participante

Slight design adjustments

resolver

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

0 Me gusta
tjoyce
Solución
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel Elite

Slight design adjustments

resolver

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 😄


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 Me gusta
CG_Alex
Participante

Slight design adjustments

resolver

Perfect, thank you for all your help @tjoyce