+ 2

how to make input background smaller ?

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

24th Jul 2022, 5:37 PM
Lakarov
Lakarov - avatar
18 odpowiedzi
24th Jul 2022, 8:28 PM
Chris Coder
Chris Coder - avatar
+ 5
Анатолий Лакаров 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
24th Jul 2022, 8:34 PM
Chris Coder
Chris Coder - avatar
+ 3
PanicS 200px was only an example. They asked how to make it smaller.
24th Jul 2022, 8:26 PM
Chris Coder
Chris Coder - avatar
+ 3
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
24th Jul 2022, 9:43 PM
Chris Coder
Chris Coder - avatar
24th Jul 2022, 9:48 PM
Chris Coder
Chris Coder - avatar
+ 2
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
24th Jul 2022, 9:46 PM
Lakarov
Lakarov - avatar
+ 2
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
24th Jul 2022, 11:16 PM
Lakarov
Lakarov - avatar
+ 2
It looks great I like the rounded borders and choice of colors. Thanks for the shout-out in your code.
24th Jul 2022, 11:38 PM
Chris Coder
Chris Coder - avatar
+ 1
With a width property: width: 200px;
24th Jul 2022, 6:32 PM
Chris Coder
Chris Coder - avatar
+ 1
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
24th Jul 2022, 7:54 PM
PanicS
PanicS - avatar
+ 1
got it, have a good day
24th Jul 2022, 8:37 PM
Lakarov
Lakarov - avatar
+ 1
thanks, i will send you full code when i finish.
24th Jul 2022, 9:51 PM
Lakarov
Lakarov - avatar
0
Chris Coder i alredy tried and then this happens https://code.sololearn.com/WOCCUnvI6fkj/?ref=app i also tried with bg-position but nothing
24th Jul 2022, 7:03 PM
Lakarov
Lakarov - avatar
0
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
24th Jul 2022, 8:11 PM
Lakarov
Lakarov - avatar
0
Thanks a lot. If this was a reddit i definetly would’ve give you some award
24th Jul 2022, 8:31 PM
Lakarov
Lakarov - avatar
0
Chris Coder thank you!
24th Jul 2022, 11:39 PM
Lakarov
Lakarov - avatar
26th Jul 2022, 9:43 AM
yerania3
0
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
29th Jul 2022, 10:17 AM
Lakarov
Lakarov - avatar