I have 2 containers touching one another but there's a gap between them of white space, how do I remove this?

App Building
1

I have 2 containers both full width. The top one is set to have a solid black background and the bottom one has a solid red background:

image

How do I remove that white space in between them? They need to be touching but I can't figure it out as I've tried a bunch of things unsuccessfully.

I need them to touch like this:

image

I'm using containers as I tried headers but that goes the entire page width, even though it's set to 80% maximum in the settings (as in, the content of the page maxes at 80% width but the headers go 100% which I don't want, so tried containers).

The black container is called "topcontainer" and the red is "bottomcontainer" in Retool. I tried setting this under custom CSS but no luck:

.topcontainer{
margin-bottom: 0;
}

.bottomcontainer{
margin-top: 0;
}

I also tried

._retool-topcontainer{
margin-bottom: 0;
}

._retool-bottomcontainer{
margin-top: 0;
}

Without luck either.

Edit: Doing this works (not to fix my problem, but this DOES impact the component so seem to be on the right track):

#retool-widget-topcontainer{
padding: 5px;

}

That doesn't solve the issue at all, but if I make it 50px then it screws up the container entirely, so #retool-widget-topcontainer{ seems to be the correct syntax. Just anything margin-bottom or padding-bottom does absolutely nothing. Doing just padding, or just margin impacts things, but not in the way I want. :slight_smile:

2

Hello, which type of container you use? you should inspect it with chrome dev tool to find the correct css path.

3

Hey there, this should actually be possible without needing to use custom CSS! Containers have an advanced appearance setting that allows you to set their Margin type to None which should remove space between containers:

Does that work?