Je ne sais pas comment positionner les éléments dans un ordre différent dans les versions mobile et de bureau

Question

J'essaie de construire un design spécifique. Voici le design sur ordinateur et mobile :

.section {
  width: 100%;
  position: relative;
}

.section__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.title {
  color: white;
}

.img {
  width: 100%;
  height: auto;
}

.text-container {
  display: flex;
  flex-direction: column;
  background-color: black;
  color: white;
}

@media only screen and (min-width: 768px) {
  .section__inner {
    width: 175px;
    margin-left: auto;
  }
  .img {
    position: absolute;
    z-index: -1;
    width: 60%;
  }
}

<div class="section">
  <div class="section__inner">
    <h1 class="title">Title</h1>
    <img class="img" src="https://source.unsplash.com/random/" alt="random" />
    <div class="text-container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur cursus ornare risus. Ut sed gravida magna. Mauris in elit imperdiet, porta turpis a, mollis lorem. Nulla consectetur gravida urna, at condimentum dolor.</p>
      <p>Suspendisse potenti. Cras malesuada lacus sed malesuada efficitur. Maecenas eros leo, sollicitudin convallis nunc nec, maximus blandit nisi. Cras eleifend nisi id risus vestibulum aliquet. Donec maximus justo at nulla blandit, vel dictum nisi volutpat.
        Morbi placerat augue vel libero feugiat, eu venenatis libero aliquet.
      </p>
    </div>
    <button>Go to the link</button>
  </div>
</div>

C'est mon stylo code avec ce que j'ai développé jusqu'à présent. Je ne comprends pas comment positionner ces éléments et quelle approche adopter.

Answer 1

Tout d'abord, vous devez définir la largeur maximale et la largeur correctes pour l'élément conteneur et lui permettre d'être centré sur l'écran (selon la conception de votre bureau)

Deuxièmement, placez le .text-container div à gauche pour qu'il soit au-dessus de l'image, et comme il est déjà dans la bonne hiérarchie, il n'est pas nécessaire de définir le z-index il s'empilera au-dessus de l'image

Enfin, déplacez le bouton vers .text-container pour qu'il puisse être positionné avec le texte

Voici la section mise à jour de CSS :

@media only screen and (min-width: 768px) {
  .section {
    /* Ensure that enough space is available before 1200px, you can tweak this according to your design */
    width: 90%;

    /* So the 90% would only apply below this threshold, you can adjust the value as well if needed */
    max-width: 1200px;

    /* Center this element */
    margin: auto;
  }

  .text-container {
    position: absolute;
    top: 20%;
    left: 50%;
  }

  .img {
    width: 60%;
  }
}

  

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
    cursus ornare risus. Ut sed gravida magna. Mauris in elit imperdiet,
    porta turpis a, mollis lorem. Nulla consectetur gravida urna, at
    condimentum dolor.
  
  

    Suspendisse potenti. Cras malesuada lacus sed malesuada efficitur.
    Maecenas eros leo, sollicitudin convallis nunc nec, maximus blandit
    nisi. Cras eleifend nisi id risus vestibulum aliquet. Donec maximus
    justo at nulla blandit, vel dictum nisi volutpat. Morbi placerat
    augue vel libero feugiat, eu venenatis libero aliquet.
  
  Go to the link

Veuillez noter que lors du redimensionnement de l’image, elle doit conserver le même rapport hauteur/largeur que le design de référence.