Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body>
  
  <h1>Zwiebelmarkt Weimar</h1>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse placeat modi velit magnam corporis quas et doloremque sit possimus temporibus ipsa, eum cum commodi tempore quisquam accusamus repellendus, soluta laboriosam!</p>
  
  <img src="http://www.flensburg-online.de/blog/wp-content/uploads/2008/09/weimarer-zwiebelmarkt-foto-maik-schuck.jpg" alt="Zwiebelmarkt Weimar">
  
  <br>
  
  <div class="item item1">Review 2013</div>
  <div class="item item2">Review 2012</div>
  <div class="item item3">Review 2011</div>
</body>
</html>
 
body{
  font-family: Arial, sans-serif;
}
img{
  width: 100%;
}
.item{
  width: 33%;
  height: 100px;
  background: #ff0000;
  color: white;
  float: left;
  text-align: center;
  padding-top: 10px;
}
.item1{
  background: #c2c2c2;
}
.item2{
  background: #8a8a8a;
}
.item3{
  background: #5a5a5a;
}
@media only screen and (max-width:400px){
  
  .item{
    color: blue;
    width: 100%;
    float: none;
  }
  
}
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers