CSS: div with full width on small screens not working

Question

I need to position a div on the right. On large screens it position itself correctly.

But when in small screens the options and the text are positioned to much to the right. I'd like to extend the white background to full width on small devices, and center options, text and buttoms. Right now text gets cut.

CodePen:

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

Large Screens:

Small Screens:

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

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl .

Try to you m-md-5 (image below):

image

Answer 2

When you need to use some CSS for specific screen size you can use @media. Now you should add the following code at the end of your CSS:

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

Also, Add bg-Smal class to the first 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>

For more information, you can visit this link: https://www.w3schools.com/csSref/css3_pr_mediaquery.asp

Answer 3

It's fair, it is not working. You have written plan css in your code and where is the responsive css code?

You have

.padded {
  padding: 80px;
}

in your code and he is the one responsible for this misbehavior. So you to write a responsive css to control his behavior. We call this responsive css as media queries though. You can learn the basics of media queries here.

Now let's solve your problem.

Your html dom goes wrong in two break points since you are using bootstrap columns I take their break points as your's too.

1. Device width = 992px
2. Device Width = 768px

So now you have to add the following code-lines to your code,

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

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

So your final working code will be look like this,

 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>