# Flex Objects not wrapping

**URL:** <https://community.hubspot.com/t/flex-objects-not-wrapping/106477>\
**Category:** CMS Development\
**Tags:** professional\
**Created:** [May 4, 2024, 6:52pm UTC](https://community.hubspot.com/t/flex-objects-not-wrapping/106477 "2024-05-04T18:52:32Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![SlimSr2003](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/slimsr2003/32/73373_2.png) [@SlimSr2003](https://community.hubspot.com/u/SlimSr2003)\
**Post date:** [May 4, 2024, 6:52pm UTC](https://community.hubspot.com/t/flex-objects-not-wrapping/106477/1 "2024-05-04T18:52:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jnix284](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jnix284/32/29_2.png) [@jnix284](https://community.hubspot.com/u/jnix284)\
**Post date:** [May 5, 2024, 1:42am UTC](https://community.hubspot.com/t/flex-objects-not-wrapping/106477/2 "2024-05-05T01:42:52Z")

</div>

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

```lia-code-sample
{#### 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 %}
}

```

---

<div class="post-metadata">

**Author:** ![SlimSr2003](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/slimsr2003/32/73373_2.png) [@SlimSr2003](https://community.hubspot.com/u/SlimSr2003)\
**Post date:** [May 9, 2024, 7:20pm UTC](https://community.hubspot.com/t/flex-objects-not-wrapping/106477/3 "2024-05-09T19:20:22Z")

</div>

Hi Jennifer,

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

Scott

---

<div class="post-metadata">

**Author:** ![jnix284](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jnix284/32/29_2.png) [@jnix284](https://community.hubspot.com/u/jnix284)\
**Post date:** [May 10, 2024, 12:20am UTC](https://community.hubspot.com/t/flex-objects-not-wrapping/106477/4 "2024-05-10T00:20:52Z")

</div>

@SlimSr2003 awesome, glad you got it fixed!