Page 1 of 1

HTML squashing only inside of grids

Posted: Wed Oct 25, 2023 8:47 pm
by Nicetalleuropean
Hi, I'm including HTML code in my site as I've done before with no issues. When placed anywhere in a grid of any kind (layout grids, flex grids etc) the text boxes in my HTML embed get squashed. However, this does not occur when placed freely to float on its own.

I've tried removing any kind of overflow or size restrictions the grids might provide to remedy this and I've yet to fix my issue.

Here is the code:

<script async src="https://eocampaign1.com/form/6ae4f7a0-7 ... d457098.js" data-form="6ae4f7a0-736e-11ee-a095-35fb1d457098"></script>

Here are a couple pictures so you can see what I mean.

Without placing the HTML block in a grid
Image


Placing the HTML block within a grid
Image

Any ideas? Thank you

Re: HTML squashing only inside of grids

Posted: Wed Oct 25, 2023 9:49 pm
by crispy68
When I place your code into a html box into a grid, it works for me. It does not look like your 2nd picture. Are you adding other code to the page yourself? Maybe something else is causing a conflict. You may want to delete 1 object at a time to try and figure out what might be the culprit.

Re: HTML squashing only inside of grids

Posted: Thu Oct 26, 2023 6:29 am
by Pablo
Be aware that layout grid itself has a zero font-size, to make sure the spaces and line breaks in the HTML do not affect the layout.
So, you will need to set a valid font-size for your custom code, otherwise text will not be visible.

Re: HTML squashing only inside of grids

Posted: Thu Oct 26, 2023 1:33 pm
by Nicetalleuropean
Pablo wrote: Thu Oct 26, 2023 6:29 am Be aware that layout grid itself has a zero font-size, to make sure the spaces and line breaks in the HTML do not affect the layout.
So, you will need to set a valid font-size for your custom code, otherwise text will not be visible.
Okay, I will try to figure out how to do that and see if that will fix it, thank you

crispy68 wrote: Wed Oct 25, 2023 9:49 pm When I place your code into a html box into a grid, it works for me. It does not look like your 2nd picture. Are you adding other code to the page yourself? Maybe something else is causing a conflict. You may want to delete 1 object at a time to try and figure out what might be the culprit.
I have no other code on the page, I am able to replicate this on a blank project, thank you for your advice I'll keep looking for conflicts.

EDIT:

I figured out how to set a font size in HTML and that fixed it perfectly. Thank you guys.