"linkedin using mediaQuery"
Bootstrap 3.0.0 Snippet by akhtarvahid

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="header"> <header>The Pulpit Rock</header> </div> <div style="margin-top:60px;"> <div class="sidemenu"> <ul> <li>Home</li> <li>Product</li> <li>Services</li> <li>About</li> <li>Contact</li> </ul> </div> <div class="mainbox"> <div class="main"> <h1>The Walk</h1> <p>The walk to the Pulpit Rock will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p> <p>The walk to the Pulpit Rock will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p> <img src="https://s-media-cache-ak0.pinimg.com/736x/dc/96/58/dc9658496921a3cc3c54dd41af5fe334--norway.jpg" alt="Pulpit rock" width="" height=""> <h1>The Walk</h1> <p>The walk to the Pulpit Rock will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p> <p>The walk to the Pulpit Rock will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p> <img src="https://s-media-cache-ak0.pinimg.com/736x/dc/96/58/dc9658496921a3cc3c54dd41af5fe334--norway.jpg" alt="Pulpit rock" width="" height=""> </div> </div> <div class="rightbox"> <div class="right"> <h2>What?</h2> <p>The Pulpit Rock is a part of a mountain that looks like a pulpit.</p> <h2>Where?</h2> <p>The Pulpit Rock is in Norway</p> <h2>Price?</h2> <p>The walk is free!</p> </div> </div> <div style="float:left"> <footer> <p>This web page is a part of a demonstration of fluid web design made by www.w3schools.com. Resize the browser window to see the content response to the resizing.</p> </footer> </div> </div>
.header{ padding:20px; background:black; color:white; width:100%; position:fixed; top:0px; } .sidemenu{ width: 23.481781376518218623481781376518%; float:left; } .main{ padding:2px; width: 48.987854251012145748987854251012%; float:left; } .right{ } li{ border: 1px solid lightgrey; list-style-type:none; margin: 4.310344827586206896551724137931%; margin-left: 0; margin-top: 0; padding: 4.310344827586206896551724137931%; border-bottom: 1px solid #e9e9e9; cursor: pointer; } mainbox{ padding:2px; } @media only screen and (max-width: 500px) { .sidemenu{ width:100%; } .mainbox{ width:100%; } .rightbox{ width:100%; margin-right: 0; float: left; padding:2px; } }

Related: See More


Questions / Comments: