Notice that the violet area is smaller in the sample project than what I was able to do in my own work. How is this done? I have tried commenting out various parts of the CSS in the sample…no change at all.
@wannacode, do not try and replicate the sample projects. They show one way the project can be done.
The instructions say yours should be “functionally similar” and to “give it your own personal style”.
The example project has min-height on the input element which it doesn’t look like you have and the line-height doesn’t look the same. Without seeing your code I can’t really give a better answer.
Oh, I get it now. It was the line-height. Funny, that commenting out those lines from the sample code still resulted in no change, I thought the user-agent style sheet defaults, if any, would kick in.
@Roma,
I understand I shouldn’t replicate, but I’m not yet a very creative person. I look at the page and refuse the temptation to right-click and view page source. But I still want to know how something is done so that in the future, if I want to do something similar I’ll be able to do it.
The line-height on the example project is set to 1.4 on the body. Without that, it will use the default which looks to be the same as 1.5 for the Poppins font used (in Chrome at least).
The default gets computed to normal and the actual value that the keyword resolves to is dependent on the user agent and font used.