Bonjour !

J'ai actuellement terminé le projet 1 Developpeur Web Junior, mais il manque un petit quelque chose selon mon mentor pour que tout soit bon !

Il aimerait que dans la partie portfolio, il y ai toujours 2 lignes de 4 images en format Dekstop. 

C'est actuellement bien le cas vers 1440 px, mais pas vers 1240 (il y a trois images alignés puis une en dessous) et 1024 (deux images a chaque fois) ... Et je n'arrive pas à trouver de solution sans que ça bouleverse l'organisation du site.

Voici le code html de la partie portfolio :

<!-- Portfolio -->
            <div id="portfolio">

            <div class="conteneur_portfolio">

                <div class="portfolio"> 
                    <figure class="image1">
                        <img src="images/portfolio/01.jpg" alt="images" class="images">
                        <figcaption class="overlay">
                                    <div><i class="fas fa-eye"></i></div>
                                    <h3>Projet 1</h3>
                                    <p>Opticien en ligne</p>
                        </figcaption>
                    </figure>

                    <figure class="image2">
                        <img src="images/portfolio/02.jpg" alt="images" class="images">
                        <figcaption class="overlay">
                                    <div><i class="fas fa-eye"></i></div>
                                    <h3>Projet 2</h3>
                                    <p>Loisir créatif</p>
                        </figcaption>
                    </figure>

                    <figure class="image3">
                        <img src="images/portfolio/03.jpg" alt="images" class="images">
                        <figcaption class="overlay">
                                    <div><i class="fas fa-eye"></i></div>
                                    <h3>Projet 3</h3>
                                    <p>Boutique vintage</p>
                        </figcaption>
                    </figure>

                    <figure class="image4">
                        <img src="images/portfolio/04.jpg" alt="images" class="images">
                        <figcaption class="overlay">
                                    <div><i class="fas fa-eye"></i></div>
                                    <h3>Projet 4</h3>
                                    <p>Carterie en ligne</p>
                        </figcaption>
                    </figure>
                </div>

                <div class="portfolio">
                    <figure class="image5">
                        <img src="images/portfolio/05.jpg" alt="images" class="images">
                        <figcaption class="overlay">
                                    <div><i class="fas fa-eye"></i></div>
                                    <h3>Projet 5</h3>
                                    <p>Boutique en ligne</p>
                        </figcaption>
                    </figure>

                    <figure class="image6">
                        <img src="images/portfolio/06.jpg" alt="images" class="images">
                        <figcaption class="overlay">
                                    <div><i class="fas fa-eye"></i></div>
                                    <h3>Projet 6</h3>
                                    <p>Blog de voyage</p>
                        </figcaption>
                    </figure>

                    <figure class="image7">
                        <img src="images/portfolio/07.jpg" alt="images" class="images">
                        <figcaption class="overlay">
                                    <div><i class="fas fa-eye"></i></div>
                                    <h3>Projet 7</h3>
                                    <p>Comparateur en ligne</p>
                        </figcaption>
                    </figure>

                    <figure class="image8">
                        <img src="images/portfolio/08.jpg" alt="images" class="images">
                        <figcaption class="overlay">
                                <div><i class="fas fa-eye"></i></div>
                                <h3>Projet 8</h3>
                                <p>Materiel bureautique</p>
                        </figcaption>
                    </figure>
                </div>

            </div>

            </div>

Le CSS (sans les animations)

.portfolio
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}

.portfolio img
{
    max-width: 250px;
    padding: 10px;
    text-align: justify;
}

figure
{
    position:relative;
}

J'ai déjà tenté de rajouter des lignes dans les deux premières <div>, mais sans grand succès... Je suis proche du but, j'ai déjà fait plus dur mais pourtant je reste coincée là-dessus 

Merci d'avance pour votre aide !

Bonjour,

L'unique problème se situe dans l'objet "figure" de tes pages.

Tu n'as pas précisé comment ils devaient se comporter dans un flex.

Je te conseille de regarder les propriétés flex-basis et flex-grow que tu devrais intégré dans ton css.

figure
{
  flex: 1 0 50%;
  margin: 0;
}

Bonjour !

J'ai ajouté :

figure
{
    position: relative;
    flex-basis: auto;
    margin: 0;
}

Et j'ai bien les 2 lignes avec les 4 images à partir de 1080px !

Merci beaucoup pour ton aide