horizontal align items in a row

Highlighted
Occasional Contributor

Hi, 

I'm working in this page: https://www.contreebute.com/comperedis#

and I wanna align the icon and the text that are inside the hero banner in one row, like this Captura de Pantalla 2019-09-03 a la(s) 5.14.55 p. m..png

How can I?

Reply
0 Upvotes
4 Replies 4
Highlighted
Esteemed Contributor | Diamond Partner

Hi @anaarrubla , 

 

Actually, in this case it's quite a simple solution: apply horizontal alignment to the image. Since it's all in one line, it's really the image you want aligned, not the text.

 

If you aren't familiar with coding or HubSpot's Design Manager, I would recommend asking someone who is!

 

Best regards,

Kim

 

Did this post help solve your problem? Help te community and mark it as solution.

Reply
0 Upvotes
Highlighted
Occasional Contributor

Hi Kim, 

thanks for answering.

could you explain better? I applied col align-self-end but it doesn't look as I want. I'm new in hubspot

Reply
0 Upvotes
Highlighted
Esteemed Contributor | Diamond Partner

Hi @anaarrubla , 

 

I can't look into the entire back-end and therefore I'm not able to tell exactly what needs to be done. I'm sorry. If you aren't familiar with coding or HubSpot's Design Manager, I would recommend asking someone who is or contacting HubSpot Support. 

 

Another option is learning more about HubSpot's Design Manager through the developers track in the HubSpot Academy

 

Best regards, 

Kim

 

Did this post help solve your problem? Help the community and mark it as solution.

Highlighted
Occasional Contributor

I'm familiar with coding and hubspot design manager, but hubl language it's a little difficult  for me. That's why am posting the question 

look I have this:

<div id="hs-hero-{{ name }}" class="hs-hero" style="background-image: url('{{ module.background.background_image.src }}'); padding-top: {{ module.settings.size }}px; padding-bottom: {{ module.settings.size }}px;">
<div class="hs-hero__content hs-hero__content--{{ module.settings.button_alignment }}">
<main>
<div class="container">
<div class="hs-hero-icon">
<div class="col align-self-end">
<img src="{{ module.icon.src }}">
{% inline_rich_text field="main_content" value="{{ module.main_content }}" %}
</div>
</div>
</div>
</main>

 

But it's ok, I will find it. Thanks!

Reply
0 Upvotes