I want to change css flex variable based on variable number

IMckell — Tue, 21 Feb 2023 18:10:04 GMT

So I'm making a module, in that module I have an image and some text that are side by side using flexbox. I want people to be able to manipulate a module variable "center" to control the flex property between the two items. This is my code.

.module-container3{
margin: 5px;
max-width: 100%;
}

.module-container3 .side-by-side{
display: flex;
flex-wrap: wrap;
}

.module-container3 .side-by-side .image{
flex: {{ module.center }};
margin: auto;
width: auto;
min-width: 100px;
}

.module-container3 .side-by-side .text{
flex: calc(100% - {{ module.center }});
padding: 0px 10px 15px 40px;
vertical-align: middle;
line-height: 1.5;
}

</style>

I put this code in the html file so that the hubl variables should work, but it's not. Any tips on how to set the flex property based on module variables?

Re: I want to change css flex variable based on variable number

hgibson2 — Wed, 22 Feb 2023 09:39:20 GMT

Check this out I believe your answer lies in this article. - https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Re: I want to change css flex variable based on variable number

hgibson2 — Mon, 27 Feb 2023 05:21:59 GMT

If that has not solved your issue here is another, https://famewide.com/

topic I want to change css flex variable based on variable number in CMS Development

I want to change css flex variable based on variable number

Re: I want to change css flex variable based on variable number

Re: I want to change css flex variable based on variable number