Skip to main content Skip to docs navigation

HTML Responsive

HTML Responsive

On this page

HTML Responsive Web Design

HTML Responsive Web Design

Column 1
Column 2
Column 3
html 
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      .container {
         background-color: white;
         display: flex;
         flex-wrap: wrap;
      }
      .col {
         width: 30%;
         background-color: 	Goldenrod;
         color: white;
         font-size: 30px;
         text-align: center;
         line-height: 200px;
         border-radius: 10px;
         flex: 1 1 200px;
         margin: 1rem;
         padding: 1rem;
      }
   </style>
</head>
<body>
   <h2>HTML Responsive Web Design </h2>
   <div class="container">
      <div class="col"> Column 1 </div>
      <div class="col"> Column 2 </div>
      <div class="col"> Column 3 </div>
   </div>
</body>
</html>

Setting the Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Viewport Example

Setting the Viewport

html 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Viewport Example</title>
</head>
<body>

<h4>Setting the Viewport</h4>

</body>
</html>

Responsive Images

Using width Property

<img src="nature.jpg" style="width:100%;">

<!DOCTYPE html>
<html>
<head>

<title>Responsive Image</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>

<h2>Responsive Image</h2>

<p>Using width Property</p>

<img src="nature.jpg" style="width:100%;">

</body>
</html>

Using the max-width Property

<img src="nature.jpg" style="max-width:100%; height:auto;">

<!DOCTYPE html>
<html>
<head>

<title>Responsive Image</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>

<h2>Responsive Image</h2>

<p>Using the max-width Property</p>

<img src="nature.jpg" style="max-width:100%; height:auto;">

</body>
</html>

Responsive Texts

<!DOCTYPE html>
<html>
<head>

<title>Responsive Text Size</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>

<h3 style="font-size:5vw;">Responsive Text</h3>

<p style="font-size:3vw;">Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser.</p>

<p style="font-size:3vw;">It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.</p>


</body>
</html>

Media Queries

Media Queries

Media Queries

Resize the browser window

Left

Center

Right

html 
<!DOCTYPE html>
<html>
<head>
<title>Media Queries</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.left {
  background-color: #cddc39;
  color: #9C27B0;
  padding: 30px;
  float: left;
  width: 25%;
  text-align: center;
}

.main {
  background-color: #9939dc;
  color: #CDDC39;
  padding: 30px;
  float: left;
  width: 50%; 
  text-align: center;
}

.right {
  background-color: #397bdc;
  color: #95ede4;
  padding: 30px;
  float: left;
  width: 25%;
  text-align: center; 
}

@media screen and (max-width: 500px) {
  .left, .main, .right {
    width: 100%;
  }
}
</style>
</head>
<body>

<h3>Media Queries</h3>
<p>Resize the browser window</p>

<div class="left">
  <p style="font-size: 30px;">Left</p>
</div>

<div class="main">
  <p style="font-size: 30px;">Center</p>
</div>

<div class="right">
  <p style="font-size: 30px;">Right</p>
</div>

</body>
</html>