• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Responsive

← Previous Next →

🔹 What is Responsive Design?

Responsive web design ensures that your website looks good on all devices—desktops, tablets, and mobile phones—by automatically adjusting layout, content size, and appearance based on screen size.

🔹 Why is it Important?

  • Provides better user experience

  • Improves SEO ranking (Google prioritizes mobile-friendly sites)

  • Works on any screen size (mobile, tablet, laptop, desktop)

  • Saves development time by using a single codebase

🔹 Key Techniques for Responsive Design

✅ 1. Viewport Meta Tag

The first step in making a website responsive is setting the viewport.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
✅ 2. Responsive Images

Images should resize automatically based on screen size.

<img src="banner.jpg" alt="Banner" style="max-width:100%; height:auto;">
✅ 3. Percentage-Based Widths

Avoid fixed pixel sizes. Use percentages or relative units.

<div style="width: 50%;">This takes half of the screen width</div>
✅ 4. Media Queries

Media queries in CSS allow you to apply styles based on screen size.

/* Default for desktop */
body {
  background-color: lightblue;
}

/* For devices smaller than 768px */
@media only screen and (max-width: 768px) {
  body {
    background-color: lightgreen;
  }
}
✅ 5. Responsive Layouts with Flexbox or Grid

Flexbox makes it easy to create flexible layouts.

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex: 1 1 300px;
  margin: 10px;
}
✅ 6. Responsive Text

Use em, %, or vw for scalable text sizes.

h1 {
  font-size: 5vw; /* 5% of the viewport width */
}
✅ 7. Mobile-First Design

Start with styles for mobile and add media queries for larger screens.

/* Mobile styles */
body {
  font-size: 14px;
}

/* Tablets and up */
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

Practice Questions

Q1. Add a viewport meta tag to your HTML document.

Q2. Create an image that resizes based on screen width.

Q3. Build a layout using percentage-based width.

Q4. Use Flexbox to create a two-column layout that stacks on small screens.

Q5. Write a media query that changes the background color for screens smaller than 600px.

Q6. Design a heading with vw units so it scales with the screen.

Q7. Make a <div> take full width on mobile and 50% on desktop.

Q8. Create a mobile-first style sheet and override it for tablets.

Q9. Use max-width and height: auto to create responsive images.

Q10. Use media queries to hide an element on mobile view.

← Previous Next →

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top