レスポンシブの際にimgがつぶれない様にしたい。

Question

前提・実現したいこと

FLOWERの模写をしてます。FLOWER

レスポンシブの際に画像がつぶれてしまいます。
場所は<!--sec3-1img--> の画像です。　宜しければお願い致します。

<!--省略--!>
    <!-- section3 -->
    <div class="row section3 no-gutters ">

      <!-- sec3-1 -->
      <div class="col-md-6 sec3-1bg ">
        <div class="sec3-1">


          <h1>選べるボリューム</h1>

          <!-- sec3-1img -->

          <div class=" sec3-1img">
            <div class=" sec3-1-1img"></div>

            <div class="sec3-1-2img">
              <div class=" sec3-1-3img"></div>
            </div>
          </div>


          <div class="sec3-1p">
            <p>価格は税抜きです。</p>
            <p>送料は360円（税別）です。</p>
            <p>プランは注文するたびに変更できます。</p>
          </div>
          
        </div>

      </div>
      <div class="col-md-6 sec3-2">

      </div>

    </div>

  </div>

</body>

</html>

/* ------------------section3----------------------*/
.section3{
height: 60vh;

}

/* sec3-1 */
.sec3-1bg{
  background-color: #f5f5f5;
  
  
}

.sec3-1{
  padding: 7rem 17rem;
}

/* sec3 h1 */
.sec3-1 h1{
  font-size: 2.6rem;
  line-height: 4.2rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* sec3 p */
.sec3-1p p{
  font-size: 1.3rem;
  line-height: 1rem;
  text-align: left;
  
  
}


.sec3-1p {
  margin-top: 2.5rem;
padding: 0rem auto ;  
}


/* sec3 img */
.sec3-1img{
display: flex;
justify-content: center;
}

.sec3-1-1img{
  background-image: url(img/plan_flower.png);
  background-size: 10rem 18rem;
  background-repeat: no-repeat;
  background-color: white;
  width: 19rem;
  height: 25rem;
  border-radius: 1rem;
  margin-right: 1.5rem;
  background-position: center;
  position: relative;
}


.sec3-1-2img {
  background-image: url(img/plan_flowers.png);
  background-size: 10rem 18rem;
  background-repeat: no-repeat;
  background-color: white;
  width: 19rem;
  height: 25rem;
  border-radius: 1rem;
  background-position: center;
  

}

.sec3-1-3img {
  position: relative;
  background-image: url(img/plan_free.png);
  background-size: contain;
  background-repeat: no-repeat;
  width:7rem;
  height:7rem;
  left: 76%;
  top:-8%
}

.sec3-1-3img img{
  position: absolute;
  width: 7rem;
  left: 70%;
  top: 20%;

}

試した事

CSS部分の

.sec3-1{
  padding: 7rem 17rem;
}

から

.sec3-1{
  padding: 7rem auto;

にすれば画像はつぶれないですがpが左端に寄ってしまいます。

Answer 1

ブロック要素は幅を設定して margin: 0 auto; で中央寄せします。

.sec3-1{
/*  padding: 7rem 17rem;*/
  max-width: 400px;
  margin: 0 auto;  /*中央寄せ*/
}

あと、font-size を模写サイトと同じにするには、下記を追加します。

html {
  font-size: 62.5%; 
}

Comments

[nollie0107]

早速のご返答ありがとうございます。
こちらで解決させて頂きました。
ありがとうございます。