レスキューレイアウトを最適化するために、これらの要素をCSSで配置する最も良い方法は何ですか？

Question

私はウェブサイトを作成していると私はこのデザインは場所に置くことがしたいセクションがあります：

は、現時点では、スピーチの泡が彼らの背景画像として設定SVG画像であり、独自のdivを使用すると、スピーチバブル内部の要素は、スピーチバブルの親div内にネストされます。ブラウザの幅を変更するときに問題が発生します。テキストはバブルの中にとどまりません。

このデザインをhtmlとCSSだけの応答性コードに変えるにはどうすればよいでしょうか？

これは、これまでのhtmlコードです：

<!-- Reviews --> 
    <section id="reviews"> 
    <h2>Reviews</h2> 
    <section class="visitor-review-1"> 
     <div class="review-1"> 
     <img id="user-image-1" src="media/profile-picture-1.png"> 
     <div id=visitor-comment-1> 
      <p>Make sure you visit Santorini when you go to Greece. Its magical! An island that is a volcano, what could be dreamier? Make sure you try the local naturally sweet red wine, sweet tomatoes and lava. 
      </p> 
      <p> 
      <strong><br>Amy Santiago</strong><br>Birmingham, UK 
      </p> 
     </div> 
     </div> 
    </section> 
    <section class="visitor-review-2"> 
     <div class="review-2"> 
     <img id="user-image-2" src="media/profile-picture-2.png"> 
     <div id=visitor-comment-2> 
      <p>We went to a restaurant with a beautiful terrace called Elinikon and had the most amazing view. Not only the sunset but before and after the sky remains beautiful colours! 100% must see when in Santorini. 
      </p> 
      <p> 
      <strong><br>Dave William</strong><br>London, UK 
      </p> 
     </div> 
     </div> 
    </section> 
    </section> 

とCSS：画面の最大幅場合はどうするか、あなたのコードを教えて@mediaタグを使用することができます

#reviews { 
    padding: 5rem 8rem 5rem 8rem; 
    height: 100px; 
} 

.visitor-review-1 { 
    background-image: url(media/speech-bubble-left_1.svg); 
    background-repeat: no-repeat; 
    background-size: 30rem; 
    height: 350px; 
    margin-top: 2.9rem; 
} 

.visitor-review-2 { 
    background-image: url(media/speech-bubble-right.svg); 
    background-repeat: no-repeat; 
    background-position: right; 
    background-size: 30rem; 
    height: 350px; 
    position: relative; 
    top: -9rem; 
} 

.review-1 { 
    width: 40%; 
    position: absolute; 
} 

.review-2 { 
    width: 50%; 
    margin-left: 52%; 
    position: absolute; 
} 

#user-image-1 { 
    width: 110px; 
    position: relative; 
    left: 180px; 
    top: 26px; 
} 

#visitor-comment-1 { 
    font-family: 'Lato', sans-serif; 
    padding: 2rem 4rem 0rem 3rem; 
    color: rgba(16, 37, 89, 0.78); 
    text-align: center; 
    position: relative; 
} 

#user-image-2 { 
    width: 110px; 
    position: relative; 
    left: 180px; 
    top: 26px; 
} 

#visitor-comment-2 { 
    font-family: 'Lato', sans-serif; 
    padding: 2rem 4rem 0rem 3rem; 
    color: rgba(16, 37, 89, 0.78); 
    text-align: center; 
    position: relative; 
} 

Answer 1

いくつかのサイズ、例：

@media only screen and (max-width: 425px) { 
    .review-1 { 
     width: 550%; 
     position: absolute; 
} 
/*And keep filling in what you want changed at screensizes here*/ 
}