Flex Objects not wrapping

Developer Support CMS Development
1

Hi All,

I have created a custom module in HubSpot. The problem I am having is that the cards are not wrapping as they should be as the screen width changes. I am confused and ChatGPT is out of suggesitons.

Here is the HTML code:

<div class=“four_card_row_container”>
{% for item in module.card %}
<div class=“card_container” style=“background-color: {{ module.style.card_background_color.color }}; height: {{ module.style.card_height }}px;”>
<div class=“card_header_icon_container”>
<div class=“card_header_text”>
{% inline_rich_text field=“card_header_text” value=“{{ item.card_header_text }}” %}
</div>
<div class=“card_icon”>
<img src=“{{ item.icon_image.src|escape_url }}” alt=“{{ item.icon_image.alt|escape_attr }}” style=“width: 70px; height: auto; object-fit: cover; “>
</div>
</div>
<div class=“card_text”>
{% inline_rich_text field=“bottom_text” value=”{{ item.bottom_text }}” %}
</div>
</div>
{% endfor %}

Here is the CSS:

.four_card_row_container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;

}

.card_container {
display: flex;
flex-direction: column;
width: 24%;
padding: 20px;
margin-bottom: 10px;
}
.card_header_icon_container {
display: flex;
flex-direction: row;
width: 100%;
}

.card_header_text {
display: flex;
justify-content: flex-start;
width: 70%;
padding-top: 20px;
padding-right: 10px;

}
.card_icon {
display: flex;
justify-content: flex-end;
align-items: flex-start;
height: 120px;

}
.card_text {
display: flex;
justify-content: flex-start;
width: 90%;
}

Any direciton would be greatly appreciated.

Thanks

Scott

2

@SlimSr2003 your CSS doesn’t have any media queries included that would tell the cards how to behave at different breakpoints.

Here’s an example of how you would need to differentiate between mobile and desktop layouts:

{#### 6 MODULES ####}
{% set total_columns_count = 12 %}
/* CSS variables */

:root {
 --column-gap: 2.13%;
 --column-width-multiplier: 8.333;
}
/* Mobile layout */

.row-fluid {
 display: flex;
 flex-wrap: wrap;
 width: 100%;
}

{% for span_num in range(1, total_columns_count + 1) %}
 {{ ".row-fluid .span" ~ span_num }}{{ loop.last ? null : "," }}
{%- endfor -%} {
 min-height: 1px;
 width: 100%;
}

/* Desktop layout */

@media (min-width: 768px) {
 .row-fluid {
 flex-wrap: nowrap;
 justify-content: space-between;
 }

 {% for span_num in range(1, total_columns_count) %}
 {{ ".row-fluid .span" ~ span_num }} {
 width: calc(var(--column-width-multiplier) * 1% * {{ span_num }} - var(--column-gap) * ({{ total_columns_count - span_num }} * var(--column-width-multiplier) / 100));
 }
 {% endfor %}
}
3

Hi Jennifer,

Thanks for the reply. I was able to fix the issue by giving them a max and min width.

Scott

4

@SlimSr2003 awesome, glad you got it fixed!