Problem: Fullscreen Section with Responsive Padding
Problem description
Given a <section class="fullscreen-section">, use media queries to provide padding: 24px on small screens, and padding: 64px on screens wider than 768px. Content should be centered.
Goal
Ensure comfortable spacing for fullscreen content on any device.
Constraints
No JavaScript is allowed.
Do not modify HTML.
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: Fullscreen Section with Responsive Padding
Problem description
Given a <section class="fullscreen-section">, use media queries to provide padding: 24px on small screens, and padding: 64px on screens wider than 768px. Content should be centered.
Goal
Ensure comfortable spacing for fullscreen content on any device.
Constraints
No JavaScript is allowed.
Do not modify HTML.
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.