How can I give different layout for desktop and mobile websites?

Question

Navigation links section on the header section is dropdown, but in desktop sites it is full width navigation and the Carousel is positioned in the bottom of page in mobile version where as it is shown in top of the page in desktop version.How can I give different layout for desktop and mobile version of the site? Please help!

Is it possible to reposition/change html element using media queries? — aparna, Jun 04 '14 at 09:14
You can reposition it yes. Not in your HTML structure but with CSS positioning, but I guess that is not what you want? — putvande, Jun 04 '14 at 09:15
Suppose this is the layout http://jsfiddle.net/aparnaunny/H2ZqC/7/ ,what I want is change this navigation item to dropdown. — aparna, Jun 04 '14 at 09:19
http://css-tricks.com/convert-menu-to-dropdown/ Finally got solution for this. Thanks! — aparna, Jun 04 '14 at 09:29

score 4 · Answer 1 · answered Jun 04 '14 at 11:41

Your description isn't great, but I assume you want a minimized menu on mobile but the full version on a desktop/laptop. You can't change this with HTML5 alone, you must use media queries.

Here are some examples that I use, put these in your included CSS file at the bottom pref:

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    /*Insert your tablet CSS in here!
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
    /*Insert your mobile CSS in here!
}

Hope this helps, M

score 1 · Answer 2 · answered Jun 04 '14 at 09:36

You can use bootstrap. It has global CSS settings. It very simple way to do this see the docs

see this example by re-sizing your browser.

    <!DOCTYPE HTML>
    <html>
    <head>
        <title> Bootstrap navbar</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
    </head>
    <body style="margin-bottom:80px;">
        <div class = "navbar navbar-inverse navbar-static-top">
            <div class="container">
                <a href = "#" class = "navbar-brand">Murali Krishna</a>
                <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                    <span class = "icon-bar"></span>
                    <span class = "icon-bar"></span>
                    <span class = "icon-bar"></span>
                </button>
                <div class = "collapse navbar-collapse navHeaderCollapse">
                    <ul class = "nav navbar-nav navbar-right">
                        <li><a href = "bootstrap.html">Home</a></li>
                        <li class="active"><a href = "#">Blog</a></li>
                        <li class="dropdown">
                            <a href="#" class = "dropdown-toggle" data-toggle="dropdown">Social Media<span class = "caret"></span></a>
                            <ul class = "dropdown-menu">
                                <li><a href = "#">Facebook</a></li>
                                <li><a href = "#">Twitter</a></li>
                                <li><a href = "#">Google+</a></li>
                            </ul>
                        </li>
                        <li><a href = "#">About</a></li>
                        <li><a href = "#contact" data-toggle="modal">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
    </html>

How can I give different layout for desktop and mobile websites?

2 Answers2