Reduce empty space

patvandenbosche

I do not like all the empty spacing vertically, but I'm not sure how to remove or, I should say, how to reduce it. For example I have a module where I've added a banner that links to a special form. I'm attaching image which demonstrates the issue. Please tell me how to reduce it. Thanks.

saguaros

Hi patvandenbosche

There are 2 ways:

1 - Go to Layout Settings in template >> edit the section that you want to configure >> Responsive tab >> and change the padding / margin as you wish.

2 - Inspect element of that section on frontend to see how it's styled:

and customize the style as you wish.

patvandenbosche

I added custom css as follows:

div[id^="t4-body-"], div[id^="t4-section-"], div[id^="t4-spotlight-"] {
    padding-top: 10px;
    padding-bottom: 10px;
}

@media (min-width: 768px)
.mt-md-4, .my-md-4 {
    margin-top: 0.1rem !important;
}

But that didn't fix it. I went into the module where I added the banner, that's where the extra spacing is at. Can you please look at it and tell me what you see?

Thanks,
Pat

saguaros

Hi Pat,

I see your custom css on frontend now, is that ok?

patvandenbosche

Sorry for such a long delay in responding... life sometimes gets in the way of living.

Yes, this fixed it. Thank you!