mark
/
prosberry
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Popravek vrstnega reda slik na mobilni verziji - Načini posredovanja
Deploy to Development and Production / deploy (push) Successful in 17s Details

This commit is contained in:
Mark 2026-03-14 14:33:26 +01:00
parent dfec525054
commit abe8753b7e
2 changed files with 46 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
css/style.css
View File

@ -4209,6 +4209,25 @@ footer {
line-height: 1.85 line-height: 1.85
} }
/* Načini posredovanja grid */
.mediation-ways-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
}
.mediation-way-item {
display: flex;
flex-direction: column;
}
@media (max-width: 768px) {
.mediation-ways-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
}
.mediation-detail-image { .mediation-detail-image {
position: relative; position: relative;
border-radius: 28px; border-radius: 28px;

32
skupaj-za-vkljucevanje/medkulturno-posredovanje/index.html
View File

@ -168,35 +168,30 @@
<div class="container" style="max-width: 1200px; margin: 0 auto;"> <div class="container" style="max-width: 1200px; margin: 0 auto;">
<h2 style="text-align: center; margin-bottom: 3rem;" data-aos="fade-up">Načini posredovanja</h2> <h2 style="text-align: center; margin-bottom: 3rem;" data-aos="fade-up">Načini posredovanja</h2>
<!-- Naslovi in opisi v isti vrsti --> <div class="mediation-ways-grid">
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; margin-bottom: 2rem;"> <!-- Individualno - besedilo in slika skupaj -->
<!-- Individualno --> <div class="mediation-way-item">
<div id="individualno" class="mediation-detail-text" data-aos="fade-up"> <div id="individualno" class="mediation-detail-text" data-aos="fade-up">
<h2>Individualno</h2> <h2>Individualno</h2>
<p>Primerno za <strong>posamezne primere</strong>, kjer gre za <strong>enega učenca ali eno družino</strong>.</p> <p>Primerno za <strong>posamezne primere</strong>, kjer gre za <strong>enega učenca ali eno družino</strong>.</p>
<p style="margin-top: 1.5rem;">📍 <em>Primer: starši ne razumejo vzgojnih ali šolskih pričakovanj, zato posrednik pomaga razjasniti postopke in pravila.</em></p> <p style="margin-top: 1.5rem;">📍 <em>Primer: starši ne razumejo vzgojnih ali šolskih pričakovanj, zato posrednik pomaga razjasniti postopke in pravila.</em></p>
</div> </div>
<div class="mediation-detail-image" data-aos="fade-up" data-aos-delay="100" style="aspect-ratio: 3/2; overflow: hidden; border-radius: 12px; margin-top: 2rem;">
<!-- Skupinsko -->
<div id="skupinsko" class="mediation-detail-text" data-aos="fade-up">
<h2>Skupinsko</h2>
<p>Primerno za <strong>več udeležencev ali skupine</strong> – <strong>učitelje, razrednike, več družin</strong>.</p>
<p style="margin-top: 1.5rem;">📍 <em>Primer: skupni sestanek s svetovalno službo, razrednikom in starši priseljencev za izboljšanje sodelovanja in razumevanja.</em></p>
</div>
</div>
<!-- Sliki v isti vrsti -->
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem;">
<!-- Slika Individualno -->
<div class="mediation-detail-image" data-aos="fade-up" data-aos-delay="100" style="aspect-ratio: 3/2; overflow: hidden; border-radius: 12px;">
<picture> <picture>
<source srcset="/assets/images/individualno.webp" type="image/webp"> <source srcset="/assets/images/individualno.webp" type="image/webp">
<img src="/assets/images/individualno.webp" alt="Individualno medkulturno posredovanje" loading="lazy" decoding="async" width="1248" height="832" style="width: 100%; height: 100%; object-fit: cover;"> <img src="/assets/images/individualno.webp" alt="Individualno medkulturno posredovanje" loading="lazy" decoding="async" width="1248" height="832" style="width: 100%; height: 100%; object-fit: cover;">
</picture> </picture>
</div> </div>
</div>
<!-- Slika Skupinsko --> <!-- Skupinsko - besedilo in slika skupaj -->
<div class="mediation-detail-image" data-aos="fade-up" data-aos-delay="100" style="aspect-ratio: 3/2; overflow: hidden; border-radius: 12px;"> <div class="mediation-way-item">
<div id="skupinsko" class="mediation-detail-text" data-aos="fade-up">
<h2>Skupinsko</h2>
<p>Primerno za <strong>več udeležencev ali skupine</strong> – <strong>učitelje, razrednike, več družin</strong>.</p>
<p style="margin-top: 1.5rem;">📍 <em>Primer: skupni sestanek s svetovalno službo, razrednikom in starši priseljencev za izboljšanje sodelovanja in razumevanja.</em></p>
</div>
<div class="mediation-detail-image" data-aos="fade-up" data-aos-delay="100" style="aspect-ratio: 3/2; overflow: hidden; border-radius: 12px; margin-top: 2rem;">
<picture> <picture>
<source srcset="/assets/images/skupinsko.webp" type="image/webp"> <source srcset="/assets/images/skupinsko.webp" type="image/webp">
<img src="/assets/images/skupinsko.webp" alt="Skupinsko medkulturno posredovanje" loading="lazy" decoding="async" width="1170" height="777" style="width: 100%; height: 100%; object-fit: cover;"> <img src="/assets/images/skupinsko.webp" alt="Skupinsko medkulturno posredovanje" loading="lazy" decoding="async" width="1170" height="777" style="width: 100%; height: 100%; object-fit: cover;">
@ -204,6 +199,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</section> </section>
<section id="oblike" class="content-section"> <section id="oblike" class="content-section">