Discussion :

[laurentSc]

Bonjour,
je ne parviens pas à rendre mon image responsive : https://pasdpanique.fr
Il s'agit de l'image "agréé certibiocide".

code de a.propos.php :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<h1>Pas d'Panique : Désinsectisation de nids de guêpes et de frelons sur le plateau du Vercors ou aux environs de Grenoble</h1>
<section class="propos">
    <article>
        <h2>Qui sommes-nous ?</h2>
        <p><strong>Pas d'panique - guêpes & frelons</strong> est une entreprise de désinsectisation dans le Vercors et environs de nids de
            guêpes ou de nids de frelons ou autres hyménoptères, située à Autrans-Méaudre (38880) dans le Vercors nord.</p>
        <p>Suite à des arrêtés préfectoraux, la destruction des nids d’hyménoptères est une compétence qui ne
            relève
            plus des pompiers. Ces prestations sont maintenant confiées à des professionnels de la
            désinsectisation.
        </p>
        <p>L'activité a été créée suite à l'arrivée du frelon asiatique sur le plateau du Vercors en 2020.</p>
        <p> Arnaud Brun a effectué une formation <a
                href="https://www.actu-environnement.com/blogs/marie-pierre-maitre-elise-merlant/212/maitre-merlant-certibiocide-entree-vigueur-distributeurs-utilisateurs-produits-biocides-303.html"
                target="_blank" alt="Lien vers un site d'information sur le certificat CertiBiocide"
                rel="noopener">CertiBiocide</a> pour utiliser le traitement le plus adapté. Il a aussi effectué
            une formation de destruction de nid de frelons asiatiques, qui fait partie des nuisibles envahissants.
            Celle-ci a été organisée par le FRGDS (Fédération régionale des groupements sanitaires) Auvergne
            Rhône-Alpes.
        </p>
        <img class="certibiocide" src="/assets/images/certibiocide.jpg" alt="agréé certibiocide">
    </article>
    <img src="/assets/images/Illustration-2-272x300.webp" alt="Illustration d'un agent de désinsectisation"> <!-- la méthode est appelée par index.php, à la racine-->
</section>

CSS associé :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* Section à propos */
 
.propos {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
 
.propos p{
    color:black;
}
 
.propos article {
    width: 70%;
}
 
.propos img {
    width: 25%;
    padding-left: 3rem
}
 
img.certibiocide {
    width: 25%;
    display: block;
    margin: auto;
}

Quand je regarde ce que dit l'inspecteur, les width:25% sont barrés.

Avez vous une idée ?

[laurentSc]

On peut simplifier le code html ; ça ne changera rien :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<h1>Pas d'Panique : titre</h1>
<section class="propos">
    <article>
        <h2>Qui sommes-nous ?</h2>
        <p>texte        </p>
        <img class="certibiocide" src="/assets/images/certibiocide.jpg" alt="agréé certibiocide">
    </article>
    <img src="/assets/images/Illustration-2-272x300.webp" alt="Illustration d'un agent de désinsectisation"> 
</section>

et c'est plus clair.

https://pasdpanique.fr/debug

[ProgElecT]

Salut

Avec ton dernier lien sur iphone X pas de problème, le responsive fonctionne.

[Doksuri]

je confirme, ton dernier lien, en mode responsive, fonctionne correctement

[laurentSc]

Merci pour vos confirmations mais comme ce n'est pas le cas sur mon iPhone 8, j'ai demandé à 3 autres personnes de vérifier...

[NoSmoking]

Bonjour,

je ne parviens pas à rendre mon image responsive

il serait bon que tu définisses clairement ce que tu entends par là car tu as une règle @media qui prend le dessus sur ta width:25% !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
@media screen and (max-width: 1100px) {
    .propos img {
        width: auto;
        padding: 0;
    }
}

... il est donc normal que tes width:25% soient barrés.