topic Trying to Create Custom 2 Column Module for Website in APIs & Integrations

Trying to Create Custom 2 Column Module for Website

TaylorBeaven — Thu, 26 Jan 2023 17:26:00 GMT

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>

Re: Trying to Create Custom 2 Column Module for Website

miljkovicmisa — Thu, 26 Jan 2023 18:13:46 GMT

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.

Re: Trying to Create Custom 2 Column Module for Website

TaylorBeaven — Fri, 27 Jan 2023 18:06:31 GMT

This is very helpful, thank you so much!