Advertisement

Responsive Advertisement

HTML RESPONSIVE WEB DESIGN

Digital Skills July 03, 2026

If you're looking for a basic responsive HTML page, here's a simple example that adapts to mobile, tablet, and desktop screens using CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Website</title>

    <style>{
            margin:0;
            padding:0;
            box-sizing:border-box;
            font-family:Arial, sans-serif;
        }

        body{
            background:#f4f4f4;
            color:#333;
        }

        header{
            background:#0077cc;
            color:#fff;
            text-align:center;
            padding:20px;
        }

        nav{
            background:#005fa3;
            display:flex;
            justify-content:center;
            flex-wrap:wrap;
        }

        nav a{
            color:#fff;
            text-decoration:none;
            padding:15px 20px;
        }

        nav a:hover{
            background:#004b82;
        }

        container{
            display:flex;
            gap:20px;
            padding:20px;
        }

        content{
            flex:3;
            background:#fff;
            padding:20px;
            border-radius:8px;
        }

        sidebar{
            flex:1;
            background:#ddd;
            padding:20px;
            border-radius:8px;
        }

        footer{
            background:#0077cc;
            color:#fff;
            text-align:center;
            padding:15px;
            margin-top:20px;
        }
        /* Tablet */
        @media (max-width: 768px){
            container{
                flex-direction:column;
            }

            nav{
                flex-direction:column;
                align-items:center;
            }

            nav a{
                width:100%;
                text-align:center;
            }
        }
      /* Mobile */
        @media (max-width: 480px){
            header h1{
                font-size:24px;
            }

            .content,
            .sidebar{
                padding:15px;
            }
        }
    </style>
</head>
<body>

<header>
    <h1>Responsive Website</h1>
    <p>HTML + CSS Responsive Design</p>
</header>

<nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
</nav>

<div class="container">
    <div class="content">
        <h2>Main Content</h2>
        <p>
            This section automatically adjusts to different screen sizes.
            Resize the browser to see the responsive layout.
        </p>
    </div>

    <div class="sidebar">
        <h3>Sidebar</h3>
        <p>This sidebar moves below the content on smaller screens.</p>
    </div>
</div>

<footer>
    &copy; 2026 Responsive Website
</footer>

</body>
</html>

Responsive features included

  •  Mobile-friendly viewport
  •  Flexible layout using Flexbox
  •  Navigation wraps on smaller screens
  •  Tablet breakpoint (768px)
  •  Mobile breakpoint (480px)
  •  Responsive content and sidebar layout
Digital Skills

Posted by Digital Skills

Post a Comment

0 Comments