Crafting Responsive Designs: Images, Fonts, Width, and Height

Responsive design is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes. Here’s an example using HTML and CSS to make an image, font, and container responsive:

Responsive Image:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }
    </style>
    <title>Responsive Example</title>
</head>
<body>
    <img src="your-image.jpg" alt="Responsive Image">
</body>
</html>

Explanation:

1. max-width: 100%; ensures that the image does not exceed the width of its container. 2. height: auto; maintains the aspect ratio of the image. 3. display: block; and margin: 0 auto; center the image within its container.

Responsive Font:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-size: 16px;
        }

        @media (max-width: 600px) {
            body {
                font-size: 14px;
            }
        }
    </style>
    <title>Responsive Example</title>
</head>
<body>
    <p>This is some text.</p>
</body>
</html>

Output (dekstop and mobile screen)

Screenshot-2023-11-11-212941 Screenshot-2023-11-11-213317

Explanation:

  1. font-size: 16px; sets the default font size.
  2. @media (max-width: 600px) applies the styles inside the block only when the screen width is 600 pixels or less.

Responsive Container (Width):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
    </style>
    <title>Responsive Example</title>
</head>
<body>
    <div class="container">
        <!-- Your content goes here -->
    </div>
</body>
</html>

Explanation:

  1. max-width: 1200px; sets the maximum width of the container.
  2. margin: 0 auto; centers the container on the page.

height as well:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            overflow: hidden; /* Clearfix to contain floated elements */
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }

        @media (max-width: 600px) {
            body {
                font-size: 14px;
            }

            .container {
                padding: 10px;
            }
        }
    </style>
    <title>Responsive Example</title>
</head>
<body>
    <div class="container">
        <h1>Responsive Example</h1>
        <img src="your-image.jpg" alt="Responsive Image">
        <p>This is some text. It will adjust its font size on smaller screens, and the image will be responsive as well. The container will adapt its padding for better spacing.</p>
    </div>
</body>
</html>

In this example:

  1. The body’s font-family, line-height, margin, and padding are set to provide a clean and consistent base.
  2. The overflow: hidden; property in the container is a clearfix technique to contain floated elements.
  3. Inside the media query (@media (max-width: 600px)), the font size of the body is reduced, and the container’s padding is adjusted to provide a better layout on smaller screens. Feel free to replace the placeholder image (your-image.jpg) and customize the content according to your needs. This example demonstrates a simple and responsive webpage that adjusts its layout based on the screen size.
Previous
Unlocking Responsive Design: CSS Strategies and Media Techniques
Next
Elevate Your Layouts with Flex-Box and flex-direction: Row, Column