I am trying to place a new text section below an existing image section (4 arrows) but because of its position (I think, I’m not sure), the arrows are above the text.
Perhaps this is happening because of style inheritance ?
The arrows section :
<section>
<div class="container">
<h4 class="blue bold mb-4 mt-3">{{ __('front.homepage.best-sales') }}</h4>
<div class="row relative">
<div class="arrowContentLeft arrowContentLeft-1">
<img class="arrowCarou" src="{{ asset('img/left-arrow.png') }}" alt="left arrow">
</div>
<div class="arrowContentRight arrowContentRight-1">
<img class="arrowCarou" src="{{ asset('img/left-arrow.png') }}" alt="left arrow">
</div>
<div class="col-lg-12 col-11 mx-auto carousel-categories">
@foreach($bestSellers as $bestSeller)
<x-product :activity="$bestSeller"/>
@endforeach
</div>
@if($bestSellers->count() < 1)
<div>{{ __('front.activities.not-found') }}</div>
@endif
</div>
<h4 class="blue bold mb-4 mt-3">{{ __('front.homepage.best-reviews') }}</h4>
<div class="row relative">
<div class="arrowContentLeft arrowContentLeft-2">
<img class="arrowCarou" src="{{ asset('img/left-arrow.png') }}" alt="left arrow">
</div>
<div class="arrowContentRight arrowContentRight-2">
<img class="arrowCarou" src="{{ asset('img/left-arrow.png') }}" alt="left arrow">
</div>
<div class="col-lg-12 col-11 mx-auto carousel-categories-2">
@foreach($bestReviews as $bestReview)
<x-product :activity="$bestReview"/>
@endforeach
</div>
@if($bestReviews->count() < 1)
<div>{{ __('front.activities.not-found') }}</div>
@endif
</div>
@if ($videos)
<h4 class="blue bold mb-4 mt-5">Des vidéos de {{ $localisation['name'] }}</h4>
<div class="row relative rowVideo">
@if(count($videos) > 5)
<div class="arrowContentLeft arrowContentLeft-3">
<img class="arrowCarou" src="{{ asset('img/left-arrow.png') }}" alt="left arrow">
</div>
<div class="arrowContentRight arrowContentRight-3">
<img class="arrowCarou" src="{{ asset('img/left-arrow.png') }}" alt="left arrow">
</div>
@endif
<div class="col-lg-12 col-11 mx-auto carousel-video">
@foreach ($videos as $video)
<div class="containerVideo">
<div class="headerVideo">
<div class="backgroundBlur">
<div class="playButton">
<img src="{{ asset('img/play-button-arrowhead.png') }}" alt="play button">
</div>
</div>
<video
class="video-js"
controls
preload="auto"
data-setup="{}"
>
<source src="{{ $video->url }}" type="video/mp4" />
{{-- <source src="{{ asset('/video/inscription-vantage.mov') }}" type="video/mov" />
<source src="{{ asset('/video/inscription-vantage.ogg') }}" type="video/ogg" />
<source src="{{ asset('/video/inscription-vantage.webm') }}" type="video/webm" /> --}}
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
</div>
<div class="descVideo">{{ $video->title }}</div>
</div>
@endforeach
</div>
@if($bestSellers->count() < 1)
<div>{{ __('front.activities.not-found') }}</div>
@endif
</div>
@endif
@if($blogs->count() > 0)
<h4 class="blue bold mb-4 mt-5">À propos de {{ $localisation['name'] }}</h4>
<div class="row relative rowInfo">
@if($blogs->count() > 3)
<div class="arrowContentLeft arrowContentLeft-4">
<img class="arrowCarou" src="{{ asset('img/left-arrow.png') }}" alt="left arrow">
</div>
<div class="arrowContentRight arrowContentRight-4">
<img class="arrowCarou" src="{{ asset('img/left-arrow.png') }}" alt="left arrow">
</div>
@endif
<div class="col-lg-12 col-11 mx-auto carousel-info">
@foreach($blogs as $blog)
<div class="containerInfo">
<div class="headerInfo">
<div class="price-tag black">
<p>
<a class="text-decoration-none" href="{{ route('blog.index', ['slug_category' => $blog->category]) }}" style="color: white;">
{{ $blog->category }}
</a>
</p>
</div>
<div class="price_tag_color" style="background-color: {{ $activity->mainTheme->color ?? '' }};"></div>
<div class="backgroundBlur"></div>
<div class="imgInfo">
<img src="{{ $blog->image->small_size ?? null }}" alt="lyon" style="width: 100%">
</div>
</div>
<div class="descInfo">
<h4 class="card-title" style="color: #000002; background: none; margin-top: 10px">
<a href="{{ route('blog.show', ['slug_category' => $blog->slug_category, 'id' => $blog->id, 'url' => $blog->url]) }}" style="color: #000002; background: none; margin-top: 10px">
{{ $blog->title }}
</a>
</h4>
<div class="card-text clear-black">
@if($blog->description)
{{ $blog->description }}
@else
{{ IlluminateSupportStr::limit(strip_tags($blog->blog), 280, $end = '...') }}
@endif
</div>
<div class="flexInfo">
<p class="dateInfo">{{ $blog->created_at_fr }}</p>
</div>
</div>
</div>
@endforeach
</div>
</div>
@endif
@if ($insta_widget)
<h4 class="textGradient bold mb-4 mt-5">#GOODtimeLyon sur Instagram</h4>
<div class="{{ $insta_widget }}"></div>
@endif
</div>
</div>
</section>
As you can see here, this text is yielded in ‘content’ :
<div id="app">
<x-header/>
@yield('content')
<x-pre-footer/>
<x-footer :homepage="$homepage ?? null"/>
</div>