How to fix this

Question

When im want to make responsive input so i write this. But If I add padding then it will exceed the page.
How to fix this with padding still there
https://code.sololearn.com/WP00JGdD2ys0/?ref=app

Answer 1

box-sizing: border-box;
Will help in this case.
More about it:
https://www.w3schools.com/css/css3_box-sizing.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer 2

Omg thanks Sanja Panic its works

Answer 3

Yu Na if i use once padding the input still exceed, bcs that i set the padding twice

Answer 4

Manav Yadav
1. He set 2 times padding(typo probably), last one have effect, so he writte padding: 5px than padding: 4px. Padding is 4 px, because of "CSS inheritance", but having 2 padding are not source of problem, thay are not added together.

2. Using % will make page more responsive, if he use px to width, like width: 300px and add padding: 5px. Width will become 310px because of "box model of css", also same is with %, his width is 100% + 10px

padding-left + width + padding-right

You can have better control if you use px, but your page wont look good on all devices, and you will have problem with making this responsive, by setting width manualy to every screen. This is not good practice.

Solution is simple, 1 line of code
With box-sizing: border-box ,we stop this from adding, so width of element will be width you set without border and padding added to it.
Read documentation i posted, to understand better how it works

Answer 5

Manav Yadav

Also if you set
element {
width: 95%;
padding-left: 2.5%;
padding-right: 2.5%;
}

width will be 100%,and this will look nice. But if you check on larger screen padding will be too big, so again not good practice.

Here is more about css inheritance and box model what are source of this problem.

About css inheritance https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

About box model
https://www.w3schools.com/css/css_boxmodel.asp

Answer 6

I want to add padding with still set widht 100% bruh

Answer 7

Just use padding once but you have written padding twice..

Answer 8

Gibran Daffa , If you are struggling with the width, the problem is that 100% width is to much so thats why it is exceeding from the page, try using px instead of % maybe it helps you to solve your problem.