CSS: div с полной шириной на маленьких экранах не работает

Question

Мне нужно расположить div справа.На больших экранах он позиционирует себя правильно.

Но когда на маленьких экранах параметры и текст располагаются намного правее.Я хотел бы расширить белый фон до полной ширины на небольших устройствах, а также по центру, текст и кнопки.Прямо сейчас текст обрезается.

CodePen:

https://codepen.io/ogonzales/pen/GPEBbW

Большие экраны:

Маленькие экраны:

HTML:

<div class="row">

    <div class="col-md-6">
        <h1>Mis Stickers</h1>
        <p>858 reviews</p>

        <img src="{{ product.image.url }}">

        <p>Custom kiss cut stickers easily peel away from the backing. Print on the surrounding border
                    as
                    well as the stickers. Made from durable vinyl that resists scratching, heat, water and
                    sunlight.</p>
      </div>

      <div class="col-md-6 col-xs-12 col-sm-12">

      <div class="m-5 bg-white col-sx-12">

      <div class="padded">

      <form method="post">

         <div id="size">


       <button type="submit" class="btn btn-naranja text-white btn-block">Continuar
       </button>
                                                               <a  href="#" class="btn btn-naranja text-white btn-block">Continuar#}
       </a>
       </br>
       <p>Siguiente: subir imagen</p>

      </form>

      </div>
     </div>

    </div>
   </div>

Answer 1

Когда вам нужно использовать CSS для определенного размера экрана, вы можете использовать @media.Теперь вы должны добавить следующий код в конец вашего CSS:

@media only screen and (max-width: 600px) {
.padded {
  padding: 0px;
}
  .bg-Smal{
    background-color: #ffffff;
  }
}

Также, добавьте класс bg-Smal к первому div:

    <div class="row">

    <div class="col-md-6">
        <h1>Mis Stickers</h1>
        <p>858 reviews</p>

        <img src="{{ product.image.url }}">

        <p>Custom kiss cut stickers easily peel away from the backing. Print on the surrounding border
                    as
                    well as the stickers. Made from durable vinyl that resists scratching, heat, water and
                    sunlight.</p>
      </div>

      <div class="bg-Smal col-md-6 col-xs-12 col-sm-12">

      <div class="m-5 bg-white col-sx-12">

      <div class="padded">

      <form method="post">

         <div id="size">


       <button type="submit" class="btn btn-naranja text-white btn-block">Continuar
       </button>
                                                               <a  href="#" class="btn btn-naranja text-white btn-block">Continuar#}
       </a>
       </br>
       <p>Siguiente: subir imagen</p>

      </form>

      </div>
     </div>

    </div>
   </div>

Для получения дополнительной информации вы можетеперейдите по этой ссылке: https://www.w3schools.com/csSref/css3_pr_mediaquery.asp

Answer 2

Это справедливо, это не работает.Вы написали plan css в своем коде, а где ответный код css?

В вашем коде

.padded {
  padding: 80px;
}

, и именно он несет ответственность за это неправильное поведение.Так что вам нужно написать отзывчивый css, чтобы контролировать свое поведение.Мы называем этот отзывчивый CSS как media queries.Вы можете изучить основы media queries здесь.

Теперь давайте решим вашу проблему.

Ваш HTML-код не работает в двух break points, так как вы используете bootstrap columns Я беру их точки разрыва как твои.

1. Ширина устройства = 992px
2. Ширина устройства = 768px

Итак, теперь вам нужно добавить следующие строки кода в ваш код,

@media (max-width:991px){
  .padded{
     padding:30px;
  }
}

 @media (max-width:767px){
  .padded{
     padding:30px;
  }
}

Итак, ваш окончательный рабочий код будет выглядеть так:

body {
  background-color: red !important;
}

.padded {
  padding: 80px;
}


/* BOTONES */

button.btn {
  text-decoration: none;
  background-color: #5ba4e6;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
  letter-spacing: 0;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
  -ms-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
  -moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
  -o-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, .09) 0%, rgba(0, 0, 0, .09) 100%);
  font-size: 1.4rem;
  padding: 22px 30px;
  border-radius: 6px;
  border: none;
}

button.btn:focus {
  outline: none;
}

@media (max-width:991px) {
  .padded {
    padding: 30px;
  }
}

@media (max-width:767px) {
  .padded {
    padding: 30px;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">

  <div class="col-md-6">
    <h1>Mis Stickers</h1>
    <p>858 reviews</p>

    <img src="{{ product.image.url }}">

    <p>Custom kiss cut stickers easily peel away from the backing. Print on the surrounding border as well as the stickers. Made from durable vinyl that resists scratching, heat, water and sunlight.
    </p>
  </div>

  <div class="col-md-6 col-xs-12 col-sm-12">
    <div class="m-5 bg-white col-sx-12">
      <div class="padded">
        <form method="post">
          <div id="size">
            <legend class="text-size20 bold-font">
              <label>Selecciona un tamaño</label>
            </legend>

            <ul class="form-items">
              <li>
                <span>
                  <input type="radio" name="size" value="variante_125" id="id_size_3" required="">                       <label>25 cm x 28 cm</label>                                      
                </span>
              </li>
              <li>
                <span>
                    <input type="radio" name="size" value="variante_125" id="id_size_3" required=""> 
                    <label>30 cm x 28 cm</label> 
                </span>
              </li>
              <li>
                <span>
                     <input type="radio" name="size" value="variante_125" id="id_size_3" required=""> 
                     <label>55 cm x 28 cm</label> 
                </span>
              </li>
              <li>
                <span>
                    <input type="radio" name="size" value="variante_125" id="id_size_3" required=""> 
                    <label>36 cm x 28 cm</label> 
                </span>
              </li>
            </ul>
          </div>


          <div id="quantity">
            <legend class="text-size20 bold-font"> <label> Selecciona la cantidad</label></legend>
            <ul class="form-items">
              <li>
                <span>
                    <input type="radio" name="size" value="variante_125" id="id_size_3" required=""> 
                    <label>100</label> 
                </span>
                <span>$69</span>
                <span class="savings">Ahorra 39%</span>
              </li>
              <li>
                <span>
                    <input type="radio" name="size" value="variante_125" id="id_size_3" required=""> 
                    <label>200</label>                                      
                 </span>
                <span>$120</span>
                <span class="savings">Ahorra 77%</span>
              </li>
              <li>
                <span>
                    <input type="radio" name="size" value="variante_125" id="id_size_3" required=""> 
                    <label>300</label> 
                 </span>
                <span>$509</span>
                <span class="savings">Ahorra 60%</span>
              </li>
            </ul>
          </div>


          <button type="submit" class="btn btn-naranja text-white btn-block">Continuar</button>
          <a href="#" class="btn btn-naranja text-white btn-block">Continuar#}</a>
          </br>
          <p>Siguiente: subir imagen</p>

        </form>
      </div>
    </div>
  </div>
</div>

Answer 3

Классы названы в формате {property}{sides}-{size} для xs и {property}{sides}-{breakpoint}-{size} для sm, md, lg, and xl.

Попробуйте m-md-5 (изображение ниже):

изображение