Bonjour à tous, 

Je viens trouver vos conseils sur une fin d'intégration pour laquelle je rencontre quelques problèmes. 

Pour commencer, voici déjà une capture écran de l'intégration telle qu'elle se présente aujourd'hui (une image vaut mieux que milles mots), j'y ai inscrit les problèmes que je rencontre : 

Voici un JSFiddle mais du coup les images ne sont pas présentes : https://jsfiddle.net/HeavenGin/Lc49r5af/3/

Dites-moi si vous préférez un autre moyen pour que je vous partage tout ça. 

En vous remerciant par avance pour votre aide. 

Bonne journée !

Bonjour,

Pour tes images à tu testé de les modifier ainsi ?

img.details-2{
    width: 40px;
    height: 40px;
}

Bonjour, 

Oui, hélas ça ne fonctionne pas...

C'est étrange chez moi ca fonctionne très bien, j'ai posé mes propres images effectué un test sur

details-2

et ca le fait bien.

EDIT: Autant pour moi effectivement j'ai un décalage.

EDIT BIS :

DONC , ca m'a travaillé cette histoire, des fois c'est plus rapide sans framework ... Pourquoi des fois...??

Teste

img.details-2{
width: 40px;
height: 40px;
}
img.details-1{
width: 40px;
height: 40px;
}

 Et pour le HTML Supprime le col-md de chacun

<img class="details-1 services-icons " src="moimini.png"/>

            <img class="details-2 services-icons offset-md-4 " src="moimini.png"/>

Et dit moi si c'est ca fonctionne

-
Edité par exen 21 septembre 2018 à 6:49:58

Hélas, il me semble que j'avais déjà testé et cela n'avait pas marché. J'ai tout de même réessayé et voici ce que j'obtiens : 

Je ne sais pas si c'est une histoire de position absolute (que j'ai aussi testé) mais c'est bien relou...

Je suis en trains de regarder le code que tu as posé sur ton liens n'est pas le même que celui des images.

Vu que sur le code le hipster central n'y est pas.

? Je ne comprends pas trop ce que tu veux dire mais du coup voici mon code réactualisé (j'ai continué à bosser le responsive) avec toutes les images sous ce lien. Ça sera plus simple :) 

https://drive.google.com/file/d/1mSsQ7nROu9J7cYgsUv9yE-Af9MbU9G0h/view?usp=sharing 

Un hipster

https://www.google.com/search?q=hipster&ie=utf-8&oe=utf-8&client=firefox-b-ab

Mais je comprend mieux pourquoi je ne le voyais pas c'est le background.

Et je viens de vois sur ton code tu as viré le col-md des images quand je regarde le comportement c'est bon elle ne sont pas déformée et font bien 40pixel

Ah mais oui, je sais ce qu'est un hipster lol

Mais de mon côté la déformation est bien là... c'est certainement à cause du navigateur utilisé je viens d'ouvrir avec Edge et pour le coup ça ne rend pas du tout pareil...

De base j'utilise Chrome.

-
Edité par HeavenGin 21 septembre 2018 à 10:50:18

Okkk voila pourquoi je comprenais pas .

tu lui rajoute !important dans ce cas.

.details-2, .details-4 {
  width: 40px !important;
  height: 40px !important; }

Après je ne sais pas si tu a vu mais de 768 à 1200  px ca se chevauche.

-
Edité par exen 21 septembre 2018 à 11:47:34

Alors j'ai réussi autrement - en ciblant vraiment la balise img en elle-même (c'était 90x90 en fait et pas 40x40 mais anyway). Maintenant il faut que j'arrive à les positionner et idéalement avec un position absolute...

Merci pour ton aide tout de même :) 

En fait ,

Je regardais ton code, tu n'utilise pas bootstrap, je dirais même qu'il t'handicape plus qu'autre chose.

J'utilise Bootstrap si...quand je peux du moins parce que ce n'est pas toujours possible de coller à la maquette juste avec Bootstrap. Enfin je trouve :/

lol mine de rien tu t'en sors mieux sans lui à mon avis.

je te disait ca par ce que la section sur la quelle je me suis penché avec toi, celle de tes images, j'ai remarqué que tu n'utilisais pas les possibilités d’alignement du texte.

https://getbootstrap.com/docs/4.1/utilities/text/

Après je t'avouerais que je ne les aient pas testées sur ta maquette.

C'est une volonté c'est pour éviter que mon html ne soit vraiment trop surchargé et que ça nuise à sa lisibilité mais si ça m'arrive d'utiliser justify-content-center notamment.

Tiens au passage tu avais testée ceci  ?

    <section class="section appointment container-fluid">
        <div class="container">
            <div class="row justify-content-center">
                    <h2 class="col-md-12">Make an Appointment</h2>
                    <hr class="offset-md-4 col-md-1"> <img class="col-md-1" src="../img/mustache.png"/> <hr class="col-md-1">
                    <div class="row justify-content-center">
                            <span class="col-md-8">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam</span>
                    </div>
            </div>
        </div>
        <form class="container">
            <div class="row">
                <input class="appointment-form offset-md-1 col-md-4" type="text" name="name" placeholder="Name">
                <select class="appointment-form offset-md-1 col-md-4" name="service">
                    <option value="" disabled selected hidden>Service</option>
                    <option value="hair-cut">Hair cut</option>
                    <option value="hair-wash">Hair wash</option>
                    <option value="hair-styling">Hair styling</option>
                    <option value="shave">Shave</option>
                </select>
                <br>
                <input class="appointment-form offset-md-1 col-md-4" type="number" name="phone" placeholder="Phone">
                <select class="appointment-form offset-md-1 col-md-4" name="barber">
                        <option value="" disabled selected hidden>Barber</option>
                        <option value="Alexandro">Alexandro</option>
                        <option value="Mickael">Mickael</option>
                        <option value="Thomas">Thomas</option>
                        <option value="Adrien">Adrien</option>
                </select>
                <br>
                <input class="appointment-form offset-md-1 col-md-4" type="email" name="email" placeholder="Email">
                <input class="appointment-form offset-md-1 col-md-4" type="date" name="date" value="Date">
                <br>
                <input class="appointment-form offset-md-1 col-md-9" type="textarea" name="message" placeholder="Message">
                <button class="appointment-form offset-md-1">Make an appointment</button>
            </div>
        </form>
    </section>