Input
Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Responsive Media Query</title> <style> body { font-size: 18px; /* Default font size */ margin: 0; font-family: Arial, sans-serif; } .container { padding: 40px; background-color: #e3f2fd; } @media screen and (max-width: 600px) { body { font-size: 14px; /* Smaller font size for small screens */ } .container { padding: 10px; /* Less padding for narrow screens */ } } </style> </head> <body> <div class="container"> <h1>Responsive Design</h1> <p>Resize the browser to 600px or less to see changes in font size and padding.</p> </div> </body> </html>