Tidak pasti cara meletakkan elemen dengan susunan berbeza dalam versi mudah alih dan desktop

Question

Saya cuba membina reka bentuk tertentu. Berikut ialah reka bentuk pada desktop dan mudah alih:

.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>

Ini adalah pen kod saya dengan apa yang telah saya bangunkan setakat ini. Saya tidak faham cara meletakkan elemen ini dan pendekatan yang perlu diambil.

Answer 1

Mula-mula, anda perlu menetapkan lebar dan lebar maksimum yang betul untuk elemen bekas dan biarkan ia dipusatkan pada skrin (mengikut reka bentuk desktop anda)

Kedua, letakkan .text-container div di sebelah kiri supaya ia berada di atas imej, dan kerana ia sudah berada dalam hierarki yang betul, tidak perlu menetapkan z-index ia akan bertindan di atas imej

Akhir sekali, alihkan butang ke dalam .text-container supaya ia boleh diletakkan dengan teks

Ini ialah bahagian CSS yang dikemas kini:

@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

Sila ambil perhatian bahawa apabila mengubah saiz imej, ia harus mengekalkan nisbah aspek yang sama seperti reka bentuk rujukan.