What do you mean with the HTML structure of the component?
Do you mean I would need to inspect the page, find the object and share that?
This is the custom component:
But in hindsight I could also simply do it with a button block with 3 buttons like this: (I would just need to make a workaround to make sure on mobile it only shows the icons and if the action is not available it will still show the button).
Containers have padding, and AI components have padding. Container padding can be adjusted with CSS. For the AI component, I usually instruct it to set container margins to zero or a small number of pixels.
I also believe you can get more specific with your instructions. You can do something like mb-2 or pb-2 to adjust bottom margin or padding to whatever units of measure it’s using. Default for margins seems to be 4. I think you can work out what mb and pb mean (ie margin bottom or padding bottom) and do the same for top, left and right. I only do that if I need to adjust a specific margin. Other than than just asking to reduce margins helps a lot.
Btw do you know if the margin is defined in the container or in the component?
I assumed it was in the container since the AI component didn’t react to me prompting requesting to make the margins smaller.
Hi Jeff, thanks for the tips but I just did that and it changes nothing.
In the prompt of the AI component I already asked to remove padding / margins, so I guess it’s in the container.
If if set the margin larger using mb-6 / pb-6 it actually get’s larger, but if I ask it to go to 0 it remains as it was before.
btw I just tried to fix it using chatGPT however I’m able to target the container.
I called it the CSS class no-padding
and applied the following piece of code in my custom css settings:
/* Remove all padding and margins from the container */
.no-padding {
padding: 0 !important;
margin: 0 !important;
}
But it only removed the bottom padding.
I tried a few other things to remove the top padding as well but these were without succes.
These are infuriating. I have problems like that a bunch of times with this component, I find it just easier to copy the whole component’s HTML, feed it to an AI model, tell it to do what you want, then copy the new code and start a component from scratch.
