fix: correct the content display of commitment 1
This commit is contained in:
parent
a09ae4d96b
commit
89d6e89c86
5 changed files with 19 additions and 21 deletions
6
resources/sass/fo/pages/commitments.scss
Executable file → Normal file
6
resources/sass/fo/pages/commitments.scss
Executable file → Normal file
|
|
@ -97,7 +97,7 @@
|
|||
}
|
||||
|
||||
.row {
|
||||
width: 390px;
|
||||
width: 100%;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
width: 500px;
|
||||
|
|
@ -429,13 +429,13 @@
|
|||
.pictogram {
|
||||
top: -3rem;
|
||||
left: -2rem;
|
||||
width: 8rem;
|
||||
width: 6rem;
|
||||
|
||||
&-reversed {
|
||||
top: -3rem;
|
||||
right: -2rem;
|
||||
left: auto;
|
||||
width: 8rem;
|
||||
width: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -283,7 +283,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
"swiper-cards-commitments": {
|
||||
modules: [Navigation],
|
||||
grabCursor: true,
|
||||
slidesPerView: 1.3,
|
||||
slidesPerView: 1,
|
||||
navigation: {
|
||||
nextEl: "#swiper-cards-commitments ~ .swiper-cards-commitments-button-next",
|
||||
prevEl: "#swiper-cards-commitments ~ .swiper-cards-commitments-button-prev",
|
||||
|
|
|
|||
|
|
@ -29,9 +29,7 @@
|
|||
],
|
||||
[
|
||||
'name' => __('L\'élevage de volailles'),
|
||||
'link' => route(
|
||||
'fo.breeding.show',
|
||||
$breedingPages->where('type', \App\Enums\StaticPageType::breedingPoultry)->first()),
|
||||
'link' => route('fo.breeding.show', 'slug'),
|
||||
],
|
||||
[
|
||||
'name' => __('Le métier d\'élevage de volailles'),
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@
|
|||
|
||||
<div class="breeding-card bottom-left-shadow position-relative card mb-5 border-0 bg-transparent">
|
||||
<div class="card-img-top line-border-medium img-wrapper bg-white p-2">
|
||||
<img class="w-100 line-border-medium" src="{{ asset($picture['src']) }}" title="{{ $picture['alt'] }}" alt="{{ $picture['title'] }}">
|
||||
<img class="w-100 line-border-medium" src="{{ Vite::asset($picture['src']) }}" title="{{ $picture['alt'] }}"
|
||||
alt="{{ $picture['title'] }}">
|
||||
</div>
|
||||
<div class="card-body position-absolute w-100 d-flex flex-column p-0">
|
||||
<div class="position-relative">
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<section id="commitments-complex-flex-items" class="position-relative">
|
||||
<section class="position-relative" id="commitments-complex-flex-items">
|
||||
@if (isset($title) && isset($picto))
|
||||
<div class="position-absolute start-50 translate-middle w-100 px-5 z-1">
|
||||
<div class="position-relative d-flex justify-content-center align-items-center w-fit mx-auto">
|
||||
<img class="title-image position-absolute start-0 top-50 translate-middle img-fluid z-1"
|
||||
src="{{ Vite::asset($picto) }}" alt="{{ $picto_alt }}" title="{{ $picto_title }}">
|
||||
<div class="bg-tertiary line-border-small w-fit ps-5 p-3">
|
||||
<h3 class="m-0">{{ $title }}</h3>
|
||||
<div class="position-absolute start-50 translate-middle w-100 z-1 px-5">
|
||||
<div class="position-relative d-flex justify-content-center align-items-center mx-auto w-fit">
|
||||
<img class="title-image position-absolute top-50 translate-middle img-fluid z-1 start-0" src="{{ Vite::asset($picto) }}"
|
||||
title="{{ $picto_title }}" alt="{{ $picto_alt }}">
|
||||
<div class="bg-tertiary line-border-small w-fit p-3 ps-5">
|
||||
<h3 class="m-0 text-center">{{ $title }}</h3>
|
||||
@if (isset($subtitle))
|
||||
<p class="f-bourton-base m-0">{{ $subtitle }}</p>
|
||||
@endif
|
||||
|
|
@ -14,15 +14,14 @@
|
|||
</div>
|
||||
@endif
|
||||
<div class="line-border-large bg-{{ $background_color }} pb-5">
|
||||
<div
|
||||
class="container d-flex flex-column flex-md-row justify-content-center justify-content-evenly align-items-start pt-5 pb-4">
|
||||
<div class="row justify-content-evenly align-items-start w-100 mx-auto mt-4 mt-lg-0">
|
||||
<div class="d-flex flex-column flex-md-row justify-content-center justify-content-evenly align-items-start container pb-4 pt-5">
|
||||
<div class="row justify-content-evenly align-items-start w-100 mt-lg-0 mx-auto mt-4">
|
||||
@foreach ($collection as $item)
|
||||
<div class="col-6 col-lg-4 card border-0 bg-transparent mb-3">
|
||||
<div class="col-6 col-lg-4 card mb-3 border-0 bg-transparent">
|
||||
<div class="row g-0">
|
||||
<div class="col-12 d-flex justify-content-center align-items-center">
|
||||
<img class="img-fluid" src="{{ Vite::asset($item->picto) }}"
|
||||
alt="{{ $item->picto_alt }}" title="{{ $item->picto_title }}">
|
||||
<img class="img-fluid" src="{{ Vite::asset($item->picto) }}" title="{{ $item->picto_title }}"
|
||||
alt="{{ $item->picto_alt }}">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card-body text-center">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue