Problem: Simple Adaptive Fullscreen Hero Section
Problem description
Given an HTML file with a single <section class="fullscreen-section"> element, write CSS to make sure this section always fills exactly 100% of the viewport height, regardless of device or screen size. Do not use JavaScript for this task. Center any content vertically and horizontally within the section.
Goal
Make the section fill the viewport and center its content with CSS only.
Constraints
Do not use JavaScript.
Only use the provided class.
Do not modify the HTML structure.
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: Simple Adaptive Fullscreen Hero Section
Problem description
Given an HTML file with a single <section class="fullscreen-section"> element, write CSS to make sure this section always fills exactly 100% of the viewport height, regardless of device or screen size. Do not use JavaScript for this task. Center any content vertically and horizontally within the section.
Goal
Make the section fill the viewport and center its content with CSS only.
Constraints
Do not use JavaScript.
Only use the provided class.
Do not modify the HTML structure.
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.