how to make input background smaller ?

Question

https://code.sololearn.com/WOCCUnvI6fkj/?ref=app

Answer 1

Анатолий Лакаров If that is what you wanted why didn't you say so before?

https://code.sololearn.com/WnNWl3XiEd84/?ref=app
https://code.sololearn.com/W51CLpHyrWy0/?ref=app

Answer 2

Анатолий Лакаров If you still have some trouble getting it to work after trying those examples. I'll show you my solution.

Also if you want to reward us you can upvote the comments that you find helpful

Answer 3

PanicS 200px was only an example. They asked how to make it smaller.

Answer 4

Solved with the width property.

Initially I only provided the property to not confuse you.

Since there are many different ways write the code.

If you need a reference. Here you go.

https://code.sololearn.com/WDTEu0UnF2aN/?ref=app

Answer 5

Анатолий Лакаров Nice progress.

Answer 6

Chris Coder thank you, i already did this reference you gave me but it still will help me me a lot
https://code.sololearn.com/W76GwMBgRt3o/?ref=app
P.S. i alredy make it pretty but then Sololearn decided to lag and all my saves were deleted so now i make it again

Answer 7

Chris Coder i finnaly end this. i wont say this is more than 5/10 but its okay for now
https://code.sololearn.com/W76GwMBgRt3o/?ref=app

Answer 8

It looks great I like the rounded borders and choice of colors. Thanks for the shout-out in your code.

Answer 9

With a width property:
width: 200px;

Answer 10

Fixed width are not good, many content will overflow or on small or bigger screen will look ugly, learn how to use relative sizes(%,em,rem,vw,vh).

I set width of conteiner to be 100% not 200px and it will take full screen size, also I added some reset code, to remove default margin, padding and to set box-sizing to border-box on every element (using * selector).

https://code.sololearn.com/WzrgSCY8rDVg/?ref=app

Answer 11

got it, have a good day

Answer 12

thanks, i will send you full code when i finish.

Answer 13

Chris Coder i alredy tried and then this happens
https://code.sololearn.com/WOCCUnvI6fkj/?ref=app
i also tried with bg-position but nothing

Answer 14

thanks, but can i ask how to put this purple bg at the middle and make it smaller at the same time cos when i change width at lower % it start shrinking only on one side
really apreciate work you put in PanicS

Answer 15

Thanks a lot.
If this was a reddit i definetly would’ve give you some award

Answer 16

Chris Coder thank you!

Answer 17

https://bajeczkiorg.pl/

Answer 18

hi Chris Coder i updatet this project few times and i wanna see your opinion about it
thx
https://code.sololearn.com/W04tQD1mW6oU/?ref=app