CSS Layout not working on mobile device

Question

My template looks pretty much the way I want it on my desktop but when I load it on my phone in either view the navigation on the left side does not resize to fit like the rest of the page does. You can view the layout at http://www.mytournamentonline.com/work/template3.php.

I would appreciate any help. Some of the css items may be redundant but I though tit was working then realized it was not displaying properly on my phone so I've tried all kinds of updates to get it working.

    <style>
    body {
    background-color: #666;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
}

#container {
    width: 80%;
    margin: 0 auto;
    background-color:#12295d;
    border:5px solid #a6c250;
}

#header img {
    width:100%;
    margin:auto;
    height: auto;
}

#content {
    float:right;
    width:81%;
    background-color:#FFFFFF;
    border-left:5px solid #a6c250;
    min-height:350px;
}

#sidebar {
    float:left;
    width:18%;
}

#primary {
    float: left;
    width: 98%;
    background-color:#245192;
    border-top: 0;
}

/* nav */
nav {
    background-color:#245192;
    width:100%;
    float:left;
    height:inherit;
}

/* navigation button styles */ 
a.btn {
    display: block;
    width: 100%;
    padding: 10px 0px 10px 10px;
    font-family: Arial;
    font-size: 16px;
    text-decoration: none;
    color: #ffffff;
    text-shadow: -1px -1px 2px #618926;
    background: -moz-linear-gradient(#98ba40, #a6c250 35%, #618926);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #98ba40),color-stop(.35, #a6c250),color-stop(1, #618926));
    border: 1px solid #618926;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

a.btn:hover {
    text-shadow: -1px -1px 2px #465f97;
    background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d));
    border: 1px solid #0f2557;
}

.currentpage {
    display: block;
    width: 100%;
    padding: 10px 0px 10px 10px;
    font-family: Arial;
    font-size: 1.5em;
    text-decoration: none;
    color: #ffffff;
    text-shadow: -1px -1px 2px #465f97;
    background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d));
    border: 1px solid #0f2557;
}
#footer {
    clear:both;
    clear: both;
    text-align:center;
    width:100$;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #DCF414;
    border-top: 5px solid #a6c250;
    background-color: #12295d;
}
</style>

<body>
<div id="container">
<div id="header">
    <img src="images/New_header_700_150.jpg" alt="My Tournamentonline Header" />
</div>

<div id="content">
    <div style="padding:10px;">
        <p>Main content</p>
    </div>
</div>

<div id="sidebar">
    <div id="primary">
            <nav>
                <?php
                    function curPageName() {
                        return substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);
                    }
                ?>
                <a href="index.php" class=<?php if (curPageName() == 'index.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Home</a>
                <a href="tournaments.php" class=<?php if (curPageName() == 'tournaments.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Active Tournaments</a>
                <a href="club_reg.php" class=<?php if (curPageName() == 'club_reg.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Club Registration</a>
                <a href="login.php" class=<?php if (curPageName() == 'login.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Member Login</a>
                <a href="contactUs.php" class=<?php if (curPageName() == 'contactUs.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Contact Us</a>    
            </nav>
           </div>
</div>

<div id="footer">
    <p>Footer</p>
</div>
</div>
</body>

Welcome to StackOverflow! The solution depends entirely on how exactly you **want** the sidebar to resize for mobiles. Would you like it to stick to the left? Drop below? Can you please be a bit more specific? Your sidebar is currently dropping below your main content because there is not enough width for it to sit on the left. That's due to you using percentage-based `widths` for both columns, but pixel-based `padding`. You may want to look into a framework like [**BootStrap**](http://getbootstrap.com) to automatically have the relevant columns stack at certain breakpoints :) — Obsidian Age, Jun 23 '17 at 02:57
add a parent class to combine both slider and main content and write styles on it .. `

slider content here

main content here ..

` and css like `.main { display: flex; }` — bhv, Jun 23 '17 at 03:09
and one more thing you have to use media queries for responsive design — bhv, Jun 23 '17 at 03:13
This question should be closed because the supplied markup does not match the web site pointed to. If the web site is the actual markup, then that is not up to current standards of web page markup. Any CSS provided is, in essence, working around broken HTML. — Rob, Jun 23 '17 at 03:24
Sorry, I would like it to stay where it is, on the left side and look the same way it looks on a regular browser if possible. I'll also check out bootstrap. Thanks — Stephen Scott Moore, Jun 23 '17 at 03:50

score 1 · Accepted Answer · answered Jun 23 '17 at 03:18

You can use media query for you requirement. You can also change some layout to fill in the mobile device.

Try the below code.

<!DOCTYPE html>
<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
    body {
    background-color: #666;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
}

#container {
    width: 80%;
    margin: 0 auto;
    background-color:#12295d;
    border:5px solid #a6c250;
}

#header img {
    width:100%;
    margin:auto;
    height: auto;
}

#content {
    float:right;
    width:81%;
    background-color:#FFFFFF;
    border-left:5px solid #a6c250;
    min-height:350px;
}

#sidebar {
    float:left;
    width:18%;
}

#primary {
    float: left;
    width: 98%;
    background-color:#245192;
    border-top: 0;
}

/* nav */
nav {
    background-color:#245192;
    width:100%;
    float:left;
    height:inherit;
}

/* navigation button styles */ 
a.btn {
    display: block;
    width: 100%;
    padding: 10px 0px 10px 10px;
    font-family: Arial;
    font-size: 16px;
    text-decoration: none;
    color: #ffffff;
    text-shadow: -1px -1px 2px #618926;
    background: -moz-linear-gradient(#98ba40, #a6c250 35%, #618926);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #98ba40),color-stop(.35, #a6c250),color-stop(1, #618926));
    border: 1px solid #618926;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

a.btn:hover {
    text-shadow: -1px -1px 2px #465f97;
    background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d));
    border: 1px solid #0f2557;
}

.currentpage {
    display: block;
    width: 100%;
    padding: 10px 0px 10px 10px;
    font-family: Arial;
    font-size: 1.5em;
    text-decoration: none;
    color: #ffffff;
    text-shadow: -1px -1px 2px #465f97;
    background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d));
    border: 1px solid #0f2557;
}
#footer {
    clear:both;
    clear: both;
    text-align:center;
    width:100$;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #DCF414;
    border-top: 5px solid #a6c250;
    background-color: #12295d;
}
 
 @media screen and (max-width:680px) {
  #sidebar {
    float:none;
    width:100%;display: block;
 }
  #content {
    float:none;
    width:100%;
 }

 }
</style>
</head>
<body>
<div id="container">
<div id="header">
    <img src="http://www.mytournamentonline.com/work/images/New_header_700_150.jpg" alt="My Tournamentonline Header" />
</div>

<div id="content">
    <div style="padding:10px;">
        <p>Main content</p>
    </div>
</div>

<div id="sidebar">
    <div id="primary">
            <nav>
                <?php
                    function curPageName() {
                        return substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);
                    }
                ?>
                <a href="index.php" class=<?php if (curPageName() == 'index.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Home</a>
                <a href="tournaments.php" class=<?php if (curPageName() == 'tournaments.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Active Tournaments</a>
                <a href="club_reg.php" class=<?php if (curPageName() == 'club_reg.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Club Registration</a>
                <a href="login.php" class=<?php if (curPageName() == 'login.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Member Login</a>
                <a href="contactUs.php" class=<?php if (curPageName() == 'contactUs.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Contact Us</a>    
            </nav>
           </div>
</div>

<div id="footer">
    <p>Footer</p>
</div>
</div>
</body></html>

score 0 · Answer 2 · answered Jun 23 '17 at 03:07

Use the media query to control the mobile view. start with the #container set width:100% . and in your Html I would suggest moving the sidebar div above the content div then swapping the floats.

Also, i would suggest setting width:100% on all #container > div.

Look into bootstrap link here

score 0 · Answer 3 · answered Jun 23 '17 at 04:26

You can use media query as like below

@media only screen and (max-width: 768px) {
/* For mobile phones: */
body {
width: 100%;
}
/* customize the tag, class, id's according to your requirement */
.class{
}
<tag>{
}
#id's{
}

if the width is below 768px then you can make use of above media queries.

CSS Layout not working on mobile device

3 Answers3

Linked