• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

Responsive Web Design Intro

← Previous Next →

🔹 What is Responsive Web Design?

Responsive Web Design (RWD) is a web development approach that allows your website or web application to look good on all devices — desktops, laptops, tablets, and smartphones — without the need for separate mobile sites.

It uses flexible layouts, media queries, fluid grids, and responsive images to automatically adjust the layout based on screen size, orientation, and resolution.

🔸 Why is RWD Important?

  • ✔️ One website for all devices

  • ✔️ Better user experience on any screen

  • ✔️ Improved SEO (Google prioritizes mobile-friendly websites)

  • ✔️ No need for separate mobile versions

  • ✔️ Faster maintenance and cost-effective

🔸 Core Components of RWD

  1. Fluid Grid Layouts
    Uses relative units like % instead of fixed units like px.

    .container {
  width: 100%;
}

  2. Flexible Images
    Images scale within their parent containers using max-width.

    img {
  max-width: 100%;
  height: auto;
}

  3. Media Queries
    CSS rules that apply at specific screen sizes or conditions.

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

🔸 Example of a Responsive Layout

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
</div>

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

.box {
  flex: 1 1 50%;
  padding: 20px;
}

@media (max-width: 600px) {
  .box {
    flex: 1 1 100%;
  }
}

📱 On desktop: 2 boxes side-by-side
📲 On mobile: Boxes stack vertically

Practice Questions

✅ Write CSS or HTML for the following:

Q1. Create a fluid layout using percentage widths.

Q2. Write media query for screens smaller than 768px.

Q3. Make an image scale within its container.

Q4. Stack two columns into one on smaller screens.

Q5. Make a button full-width only on mobile.

Q6. Use flex-wrap to wrap items responsively.

Q7. Set font-size to be smaller on mobile devices.

Q8. Hide a sidebar on screens less than 500px wide.

Q9. Align menu items horizontally and collapse into a menu icon on small screens.

Q10. Create a responsive three-column layout that becomes single-column on phones.

← Previous Next →

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top