Javascript + css without answer in <form>

[joselmerino]

Hello,

sorry for the English,

The intention that I have is the following on the forms. I am clear that using @media query I can vary the width of the columns according to the width of the window.

But what I also want to achieve is to be able to modify it when the width of the "parent" div is about a specific size.

This can be achieved with the javascript attachments and adding the data in css. But I can not get him to act on the form.

Thank.

Template:

https://app.hubspot.com/design-manager/5102317/templates/8764322669

Css:

.form-columns-2[max-width~="500px"] .hs-form fieldset.form-columns-2 .hs-form-field { width: 100% !important; float: none !important; }

javascript&colon;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn2.hubspot.net/hubfs/5102317/1-new%20web%20JLM/ResizeSensor.js"></script>
<script src="https://cdn2.hubspot.net/hubfs/5102317/1-new%20web%20JLM/ElementQueries.js"></script>

[joselmerino]

This is an example:

codepen

[jennysowyrda]

Hi @joselmerino,

Do you have a link to a live page we can look at and see this in action? 

The more links, screenshots and details you can provide, the better the Community can assist!

Thanks,
Jenny