How to add green box under image slider in wordpress? - html

Question

I have a wordpress site and I am using the spacious theme. And what I want to archive is just a green box under de image slider. So the code of the image slider is like this:
<section id="featured-slider">
<div class="slider-cycle" style="height: 465.922px;">
<nav id="controllers" class="clearfix">
<a class="active"/>
<a class=""/>
<a class=""/>
<a class=""/>
<a class=""/>
</nav>
<div class="slides displayblock cycle-slide cycle-slide-active" style="position: absolute; top: 0px; left: 0px; z-index: 99; opacity: 1; display: block; visibility: visible;">
<figure>
<img class="lazy loaded" width="1500" height="655" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/slide-1-meeuwen-1500-655-slider-2.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/slide-1-meeuwen-1500-655-slider-2.png" data-was-processed="true">
</figure>
<div class="entry-container">
<div class="clearfix"/>
<a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/doe-mee-2/" title="">Doe mee</a>
</div>
</div>
<div class="slides displaynone cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 97; visibility: hidden; opacity: 0; display: block;">
<figure>
<img class="lazy loaded" width="4950" height="2162" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/Mensen-in-het-park-Den-Haag.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/Mensen-in-het-park-Den-Haag.png" data-was-processed="true">
</figure>
<div class="entry-container">
<div class="clearfix"/>
<a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/steun-ons/" title="">Steun ons</a>
</div>
</div>
<div class="slides displaynone cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 96; visibility: hidden; opacity: 0; display: block;">
<figure>
<img class="lazy loaded" width="4350" height="1899" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/slide-3-zomer-Den-Haag-kinderen-spelen-slider.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/slide-3-zomer-Den-Haag-kinderen-spelen-slider.png" data-was-processed="true">
</figure>
<div class="entry-container">
<div class="clearfix"/>
<a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/verbind-op-locatie-of-thema/" title="">Verbind op locatie of thema</a>
</div>
</div>
<div class="slides displaynone cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 95; visibility: hidden; opacity: 0; display: block;">
<figure>
<img class="lazy loaded" width="4799" height="2095" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/terras-vol-Den-Haag-blur-TEST-5250-2095-TEST.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/terras-vol-Den-Haag-blur-TEST-5250-2095-TEST.png" data-was-processed="true">
</figure>
<div class="entry-container">
<div class="clearfix"/>
<a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/word-lid/" title="">Word lid en één van ons</a>
</div>
</div>
<div class="slides displaynone cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 100; visibility: hidden; opacity: 0; display: block;">
<figure>
<img class="lazy loaded" width="4200" height="1834" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/surfers-strand-test-4200-1834-ICARUS-2.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/surfers-strand-test-4200-1834-ICARUS-2.png" data-was-processed="true">
</figure>
<div class="entry-container">
<div class="clearfix"/>
<a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/evenementen/" title="">Evenementen >>> agenda</a>
</div>
</div>
</div>
</section>
And I try it with css like this:
#featured-slider img {
border-bottom: 70px solid #72BF44;
width: 1067x;
height: 466px;
}
But this is not the correct way. Because the images are transforming. And also the greenbox takes space from the images.
And I also want to have some text in the green box.
So I have added a image how it have to look like.
With the text in the green box. And I am using the Guttenberg layout for editing the pages.
if I do it with the option: "Custom HTML" in the Gutenberg page.
It already looks better. But how to make this full width. Like the images above?
There is a class inner-wrap:
<div class="inner-wrap">
<div id="primary">
<div id="content" class="clearfix">
<div style="background:#72BF44;height:70px;width: 100%;"></div>
</div>
with the css:
.inner-wrap {
width: 94%;
}
.inner-wrap {
margin: 0 auto;
max-width: 1218px;
}
So how to overrule the inner-wrap, so that the greenbox has the full widht of the images?

Answer 1

Add an "Custom HTML" block with this content:
<div style="background:#72BF44;height:70px"></div>