Problem: Fluid Button Width
Problem description
You have a standalone <button> element. Write CSS rules so its width adjusts based on the viewport width, never falling below 150px and never exceeding 300px.
Goal
Implement CSS in styles.css to apply the clamp() function, ensuring the button’s width is responsive within the specified bounds.
Constraints
Do not modify the HTML structure.
Use only CSS (no JavaScript is allowed).
Button width must be between
150pxand300px.Width should scale proportionally to viewport width between these limits.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.
Problem: Fluid Button Width
Problem description
You have a standalone <button> element. Write CSS rules so its width adjusts based on the viewport width, never falling below 150px and never exceeding 300px.
Goal
Implement CSS in styles.css to apply the clamp() function, ensuring the button’s width is responsive within the specified bounds.
Constraints
Do not modify the HTML structure.
Use only CSS (no JavaScript is allowed).
Button width must be between
150pxand300px.Width should scale proportionally to viewport width between these limits.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.