Problem description

Given an HTML page with two footer sections:

• <div class="footer-social-icons"> contains multiple social media <a> elements (e.g., Facebook, Twitter, and Instagram).

• <button class="mobile-share-button">Share</button> is a button to share content on mobile.

Write CSS to meet the following requirements:

• The .footer-social-icons should be visible when the viewport width is 800px or wider and hidden when the viewport width is less than 800px.

• The .mobile-share-button should be visible when the viewport width is less than 800px and hidden when the viewport width is 800px or wider.

• Do not modify the HTML structure or use JavaScript.

Goal

Provide desktop users with direct links to social profiles in the footer, while offering mobile users a simple “Share” button to streamline the user experience on each device.

Constraints

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

• Use exactly 800px as the breakpoint.

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.