Shouldn’t the border radius which is set as “border-radius: 100vmax;”change when viewport changes?
1. Picutre is the button in smaller frame. But it stays stable. How?
Did I miss anything?
Kevin's code: https://github.com/kevin-powell/fem-manage-landing-page-part-4
2. Kevin’s twet: “Something like 100vmax border-radius for pill shapes, or 100vmax box-shadows that will take up the entire viewport with no overflow issues…”
How this works?
3. what does he mean "take up the entire viewport"
Thanks!
GitHub
GitHub - kevin-powell/fem-manage-landing-page-part-4
Contribute to kevin-powell/fem-manage-landing-page-part-4 development by creating an account on GitHub.
5 Replies
Kevin uses 100vmax just as a "big value" to be sure the border-radius value is greater than half of the height of the element.
The border-radius of the corners will stop growing when they meet eachother halfway
as long as the button is not twice as large as the screen, you won't see an effect
He could also have used a specific value that is half the height of the button, but when the height gets bigger for some reason, it won't be a pill anymore.
aw, "The border-radius of the corners will stop growing when they meet eachother halfway", this is how it stays the same. thank you!
how "100vmax box-shadows that will take up the entire viewport with no overflow issues…" this will look like? why need a box-shadow to take up the whole viewport?
for example when you have a pop up modal, you can have a boxshadow on that which covers up the rest of the content
oh i see. thank you!❤️
no problem, you're welcome. Good luck!