Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing:border-box;
}
​
.left {
  background-color:#2196F3;
  padding:20px;
  float:left;
  width:20%; /* The width is 20%, by default */
}
​
.main {
  background-color:#f1f1f1;
  padding:20px;
  float:left;
  width:60%; /* The width is 60%, by default */
}
​
.right {
  background-color:#4CAF50;
  padding:20px;
  float:left;
  width:20%; /* The width is 20%, by default */
}
​
/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
  .left, .main, .right {
    width:100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
</style>
</head>
<body>
​
<h2>Media Queries</h2>
<p>Resize the browser window.</p>
​
<p dir = 'rtl'>قسمت خروجی را کوچکتر کنید تا به 800px برسد. آن موقع متوجه تغییر می شوید
  سپس قسمت خروجی را بزرگتر کنید تا ببینید در حالت بزرگ چه اتفاقی می افتد.
  </p>
​
<div class="left">
  <p>Left Menu</p>
</div>
​
<div class="main">
  <p>Main Content</p>
</div>
​
<div class="right">
  <p>Right Content</p>
</div>
​
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Amir-ZMpro
0viewers