Responsive Padding?

HTML & CSS
1

Hello. I am working on a checkout form, and currently have 2rem padding to create a gutter around the form fields.

As my screen gets more narrow (or technically really large), it seems like my 2rem padding loses its place.

Is there a way to use percentages for padding (and margins) so that you don’t lose the “proportionality” of your design as things shrink (or grow) beyond their normal size?

2

I have the following CSS set and it works quite well:

.mga {margin: 0 auto;}
.w88 {width: 88%; max-width: 62.25em;}

I will let you calculate the padding on 320px and 1280px screen sizes :slight_smile:

3

But can you do something like this…

.someBox{
     padding: 0 10%;
}
4

For a small fee I will try it for you :slight_smile:

5

I spent my last quarter on the bus ride home tonight…

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.