APIs & Integrations

TaylorBeaven
Membro

Trying to Create Custom 2 Column Module for Website

resolver

Hello there, I'm trying to create a custom module for my HubSpot website that has 2 columns next to one another. In the left column I was hoping to have a YouTube video embedded and in the right just some text. I've listed my HTML + Hubl code that's helped me separate the two sets of content but I'm lost with how to use CSS to make the content appear next to one another as it currently has Column 1 content over Column 2 content.

 

<div class="section-wrapper">
<div class="column-1">
{% inline_rich_text field="column_1" value="{{ module.column_1 }}" %}
</div>
<div class="column-2">
{% inline_rich_text field="column_2" value="{{ module.column_2 }}" %}
</div>
</div>

0 Avaliação positiva
1 Solução aceita
miljkovicmisa
Solução
Top colaborador(a) | Parceiro Platinum
Top colaborador(a) | Parceiro Platinum

Trying to Create Custom 2 Column Module for Website

resolver

Hi @TaylorBeaven, one possible solution with css is to use flexbox, so it should look something like the following:

 

.section-wrapper {
    display: flex;
    flex-direction: row;
}

 

 

Moving on you should add some media queries to make sure everything is responsive. Here is a great resource on flexbox: 
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

If my answer was helpful please mark it as a solution.

Exibir solução no post original

0 Avaliação positiva
2 Respostas 2
miljkovicmisa
Solução
Top colaborador(a) | Parceiro Platinum
Top colaborador(a) | Parceiro Platinum

Trying to Create Custom 2 Column Module for Website

resolver

Hi @TaylorBeaven, one possible solution with css is to use flexbox, so it should look something like the following:

 

.section-wrapper {
    display: flex;
    flex-direction: row;
}

 

 

Moving on you should add some media queries to make sure everything is responsive. Here is a great resource on flexbox: 
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

If my answer was helpful please mark it as a solution.

0 Avaliação positiva
TaylorBeaven
Membro

Trying to Create Custom 2 Column Module for Website

resolver

This is very helpful, thank you so much!

0 Avaliação positiva