How could a desktop version of a web page featuring a fixed sidebar be converted to a mobile version?

StackOverflow https://stackoverflow.com//questions/20025358

Question

I have a web page that features a sidebar of links that should remain visible as the user scrolls vertically through the page. How could I

  • get the page to fit to the screen of a mobile device in a reasonable way (e.g., it resizes to fill the screen horizontally) and
  • maintain the design in which the sidebar remains visible when scrolling vertically?

In the present implementation, the content does not resize to fill the screen of a mobile device and the sizebar does not present itself in reasonable positions when the user to zooms in (tested on two standard Android browsers). Other comments or criticism on the implementation are very welcome. Thanks! :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <title>website 1</title>
    <style type="text/css">
        @font-face {
            font-family: 'FuturaLTBold';
            src: URL(http://dropcanvas.com/6qfw8/1);
        }
        @font-face {
            font-family: 'FuturaLT';
            src: URL(http://dropcanvas.com/ulurh/1);
        }
        body, html{
            margin: 0;
            padding: 0;
            background: #c0c0c0;
            color: #000000;
            font-family: FuturaLT;
            font-size: 15px;
            line-height: 1.5;
            text-align: justify;
        }
        h1 {
            margin: 0;
        }
        h2 {
            margin: 0;
        }
        a:link {
            color: #CB4C2F;
            text-decoration: none;
        }
        a:visited {
            color: #CB4C2F;
        }
        a:active, a:hover {
            color: #b60a00;
        }
        }
        #line_1 {
            size: 500px;
            border-top: 1px solid #000000;
        }
        #line_2 {
            size: 500px;
            border-top: 1px solid #c0c0c0;
        }
        .button_1 {
            width: 100px;
            height: 100px;          
            background-color: #c0c0c0;
            border: 1px solid #c0c0c0;
            display: inline-block;
            color: #000000;
            font-size: 12px;
            text-align: left;
            white-space: normal;
            font-family: FuturaLT;
            font-weight: bold;
            padding: 10px 10px;
            text-decoration: none;        
            text-shadow: 0px 0px 0px #c0c0c0;        
        }
        .button_1:hover {
            color: #c0c0c0;
            background-color: #000000;
            border: 1px solid #000000;
        }
        .button_1:active {
            position: relative;
            top: 0px;
            background-color: #c0c0c0;
            border: 1px solid #c0c0c0;
            color: #000000;
        }
        #wrap_1 {
            width: 600px;
            margin: 0 auto;
            background: #5c5c5c;
        }
        #header_1 {
            padding: 5px 10px;
            background: #dddddd;
            border-top: 1px solid #5c5c5c;
            border-bottom: 1px solid #5c5c5c;
        }
        #main_1 {
            float: right;
            width: 450px;
            padding: 10px;
            background: #dddddd;
            min-height: 744px; 
        }
        #sidebar_1 {
            position: fixed;
            float: left;
            width: 130px;
            padding: 0px;
            background: #5c5c5c;
            text-align: center;
        }
        #footer_1 {
            clear: both;
            padding: 5px 10px;
            background: #dddddd;
            border-top: 1px solid #5c5c5c;
            border-bottom: 1px solid #5c5c5c;
        }
        @media (max-height: 790px) {
            #sidebar_1 {
                position: relative;
            }
        }
    </style>
</head>
<body>
<div id="wrap_1">
    <div id="header_1"><h1>WEB SITE TITLE</h1></div>
    <div id="main_1">
The signal strengthens. The noise fades. Forecast becomes nowcast.<br>The model and I are one.<br>
<br>
quick links:<br>
- <a href="http://www.gnu.org/">The GNU Operating System</a><br>
- <a href="http://www.wikipedia.org/">Wikipedia</a><br>
- <a href="http://www.timecube.com/">Time Cube</a><br>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mauris urna, pretium vel vulputate quis, lacinia vitae sem. Nam rhoncus vestibulum felis non posuere. Ut fermentum ligula lacus, id vehicula sem auctor in. Morbi eleifend placerat mauris, eu egestas risus consectetur ac. Aliquam in odio eu mauris condimentum tempus id nec augue. Ut facilisis magna placerat, mattis sapien a, pulvinar nisl. Sed consectetur justo et lacus tempus accumsan.

Nullam aliquam risus a arcu adipiscing ullamcorper. Mauris felis felis, sollicitudin eu venenatis nec, fringilla eget ligula. Praesent eget venenatis ipsum. Duis vehicula mollis erat, sed bibendum mi commodo quis. Proin euismod viverra odio. Phasellus ut consectetur ligula, a tincidunt sem. Nullam commodo lectus sit amet turpis ullamcorper, ut blandit erat rhoncus. Sed adipiscing odio elementum sodales scelerisque. Curabitur vel scelerisque urna. Integer et cursus erat, sit amet gravida eros. Mauris porttitor egestas elit eget blandit. Maecenas sit amet dictum libero. Sed varius laoreet sapien at laoreet.

Nullam non luctus erat. Morbi dui erat, ultrices non ligula quis, facilisis vestibulum quam. Nulla ante erat, rutrum et nunc et, rhoncus hendrerit nibh. Maecenas in laoreet nibh, id condimentum erat. Proin sit amet urna porta, consequat tellus hendrerit, euismod enim. Ut volutpat dapibus turpis eget tempor. Aliquam urna velit, lacinia vel convallis at, consequat sed felis. Donec interdum ullamcorper dui, vitae posuere velit iaculis vitae. Nunc varius lectus id est gravida suscipit.

Etiam imperdiet ante in accumsan gravida. Fusce pellentesque arcu ut metus facilisis, non congue risus ultrices. Cras et leo gravida, hendrerit lectus sed, dictum urna. Praesent ultrices sapien nec purus consequat, quis aliquam velit pellentesque. Morbi pretium eget massa quis adipiscing. Quisque tortor erat, faucibus at imperdiet eu, ultricies sit amet risus. Phasellus sed urna a ligula hendrerit sagittis. In quis ligula enim. Morbi tortor purus, adipiscing sed arcu ut, tempor dictum lectus. Donec neque felis, tincidunt sit amet mollis sed, mollis at elit. Etiam enim odio, consequat id gravida at, faucibus id erat. Donec a sapien sit amet massa vestibulum fringilla. Phasellus viverra adipiscing neque. Etiam a risus justo.

Vivamus mollis urna et massa semper, vestibulum semper eros mattis. Sed pharetra ultrices nulla ac pulvinar. Duis feugiat in massa ac ornare. Etiam rhoncus ut sapien vel consectetur. Donec nec erat in urna molestie pellentesque. Aenean laoreet lorem ut quam vehicula scelerisque. Vivamus condimentum, dolor vitae fringilla viverra, lorem odio pulvinar leo, ac vestibulum turpis risus eget nunc. Donec faucibus neque sit amet eleifend pulvinar. Aenean nibh felis, fringilla sed purus aliquet, cursus dapibus enim. Vestibulum in massa vitae eros blandit gravida sit amet ut erat. Ut lobortis metus ut neque iaculis laoreet. Praesent eget varius enim, at bibendum elit.

Ut dapibus lacus at nibh pharetra aliquet. Morbi felis purus, aliquam in nulla ac, aliquam tempus eros. Donec facilisis mi diam, eu accumsan mi vehicula sit amet. Maecenas blandit lorem eget tincidunt ultricies. Sed lectus metus, ullamcorper eu ipsum vitae, vulputate iaculis enim. Integer ultrices nulla sit amet felis porta imperdiet. Sed suscipit, est ac iaculis posuere, sapien orci auctor leo, quis egestas diam nunc quis neque. Nam diam ligula, eleifend sed quam luctus, adipiscing pretium dolor.

Quisque placerat semper tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies lorem non tempor pharetra. Sed ut mauris iaculis nunc suscipit vulputate sed vitae lorem. Sed vehicula erat erat, non varius turpis mollis at. Sed eget velit adipiscing, accumsan diam a, condimentum nisi. Maecenas lacinia sed purus non tempor. Nulla nec elit semper, rutrum eros et, interdum mauris. Praesent enim risus, consequat at feugiat vitae, aliquam eget magna. Ut semper elementum tortor non bibendum. Pellentesque fermentum sapien ipsum, sed dapibus tortor vulputate eget. Nullam gravida augue vitae risus imperdiet, non tristique nunc ultrices. Duis vehicula in magna eget vestibulum. Quisque nec lectus sed sapien viverra venenatis eu ut ante.
</div>
<div id="sidebar_1">
    <br>
    <input value="HOME" onclick="location.href='index.html';" type="button" class="button_1"><br><br>
    <input value="RESOURCES" onclick="location.href='resources.html';" type="button" class="button_1"><br><br>
    <input value="LABORATORY NOTEBOOK" onclick="location.href='laboratory_notebook_1.html';" type="button" class="button_1"><br><br>
    <input value="WEBLOG" onclick="location.href='weblog.html';" type="button" class="button_1"><br><br>
    <input value="PUBLICATIONS" onclick="location.href='publications.html';" type="button" class="button_1"><br><br>
    <input value="LINKS" onclick="location.href='links.html';" type="button" class="button_1"><br><br>
    <hr class="line_2" border=0 size=0>
</div>
<div id="footer_1">
</div>
</div>
</body>
</html>
Was it helpful?

Solution

On mobile, you probably won't have enough screen real estate to keep a bunch of links visible at all times. Also, iOS has issues with position: fixed elements, and I believe some of the older android browsers do as well.

Horizontal media-queries is the short answer, with width: 100% on #wrap_1.

You also need a meta tag in the <head> section: <meta name="viewport" content="width=device-width, initial-scale=1.0">. This will force the site into not zooming out and still allow the user to zoom in if needed.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top