Problem description

Given an HTML page with two banner sections:

• <div class="desktop-banner"> contains a promotional image for desktop.

• <div class="mobile-banner"> contains a promotional image optimized for mobile.

Write CSS to meet the following requirements:

• The .desktop-banner should be visible when the viewport width is 1024px or wider and hidden otherwise.

• The .mobile-banner should be visible when the viewport width is less than 1024px and hidden otherwise.

• Do not modify the HTML or use JavaScript.

Goal

Display the appropriate promotional banner based on the user’s device width to ensure optimal image and layout.

Constraints

• Only use CSS; JavaScript or HTML changes are not allowed.

• The breakpoint for switching visibility is exactly 1024px.

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.