Make padding responsive

Question

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 1

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.

Answer 2

There are values in CSS that are for sizing things in relation to the viewport (the size of the browser window). One unit is 1% of one of the axes of the viewport. These can be useful for responsive design, that is, designing websites that look good across different screen sizes, taking advantage of the space available to them.

padding: 1vw // 1% of viewport width
padding: 1vh // 1% of viewport height
padding: 1vmin // 1vw or 1vh, whichever is smaller
padding: 1vmax // 1vw or 1vh, whichever is larger

and you can also use grid based layout from bootstrap

Answer 3

Since we don't know what you want to create, and what result you're looking for, it's pretty difficult writing anything specific.

With that said: pixels will be pixels no matter the device you're opening the site from. So setting a fixed size on elements will often result in elements going outside of visible area and similar. That's probably what you're experiencing. Setting the padding with pixels, will keep exactly that amount of padding no matter what device used to open the site.

BUT you mention Bootstrap, which have quite good grid system that works device independent. They use media queries to keep control of device and layout. Specifically are they using .col-xs- (less than 768px), .col-sm- (greater than or equal to 768px), .col-md- (greater than or equal to 992px), .col-lg- (greater than or equal to 1170px). That means you can place your content in groups and rows, where you can keep full control of how they are rendered and placed on different screen sizes.

So for your project, and for better control of layout and placement, I would recommend you take a look at the grid system HERE.