[Bootstrap][CSS] Two blocks overlap

Hello, the two blocks: main-content and bg-subscribe overlap (they don’t appear one after the other). I want them to appear one after the other, without overlapping.

<div class="main-content">
      
</div>
  
<section class="bg-subscribe mt-5">
       
</section>

You can see the source code of the issue here: [link deleted] (click on Recent ads)

Screenshot of the issue: [screenshot deleted]

martinbean

1 year ago

Best Answer

Level 80

@ilex01 It’s become your “recent jobs” tab panel has its height set explicitly to 0 pixels, so the page isn’t creating enough space to accommodate for the recent ads items. You’re only seeing the ads because they’re “overflowing” the container.

Remove your custom .h0 class from your custom styles (especially since Bootstrap already has a .h-0 utility class that does the same thing). I don’t know why you’re trying to set the height to zero in the first place, though.

I’ve added a dashed red border around the element to illustrate where the problem is. As you can see, the red border doesn’t actually have a height and isn’t “wrapping” your ads.

1 like

ilex01

1 year ago

Level 5

@martinbean Thank you a thousand times.

1 like

martinbean

1 year ago

Level 80

@ilex01 No problem 🙂

I’ve used Bootstrap since version 1, so happy to answer any Bootstrap-related questions!

Please or to participate in this conversation.