Anon Ymous Anon Ymous - 3 months ago 10
CSS Question

Make padding responsive

I just started using Bootstrap, and I'm new in front-end development in general. I'm having a problem with padding, since it remains the same size in desktop and mobile devices.

HTML code:

<div class="container" id="i-container">
<h3>We possess high quality products &mdash; therefore our customers are always loyal</h3>
</div>


CSS code:

#i-container{
border: solid;
border-color: rosybrown;
padding-left: 150px
padding-top: 10px;
}


As I mentioned above, in mobile devices the padding remains the same (it doesn't seem to be responsive). I tried using em too, by the way. It doesn't help either.

Answer

Use percentage as a unit of measurement while making your website responsive. Pixels does not work if you want it to be responsive. If you use percentage, the measurement is taken with respect to the size of the screen. But if you use pixels, the padding remains the same for all sizes. Simply, alter your CSS as shown below:

#i-container{
        border: solid;
        border-color: rosybrown;
        padding-left: 12%;
        padding-top: 0.5%;
    }

Use your desired percentage.