Problem: Fullscreen Section with Responsive Padding

easy
15 min
Try to apply responsive padding and center content within a fullscreen section.

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

easy
15 min
Try to apply responsive padding and center content within a fullscreen section.

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.