CODEWITHSUNDEEP
javascriptandroidhtmlcsstwitter-bootstrap
evan10593
evan10593

Reputation: 27

Bootstrap not displaying properly on mobile

I finally got my layout the way I want it, but when I view it on moblie it's all messed up. I'm using Bootstrap 3.

This is what it looks like on Desktop: https://i.sstatic.net/iteNj.jpg

Using Developer mode in Chrome this is what it SHOULD look like on mobile: https://i.sstatic.net/ySZaJ.jpg

And THIS is what it actually looks like... : https://i.sstatic.net/KMgJf.jpg

I'm accessing it through localhost using XAMPP, and everything works as intended on desktop, but on mobile that mess happens. It's worth noting that bootstrap is what is broken, anything i defined on my own works fine. With the exception of my tiny JavaScript function which interacts with bootstrap, so again, bootstrap is the culprit.

I'm at a loss for what to do. The code is below for the page, hopefully someone will be able to spot what I cannot.

code: https://pastebin.com/srwFu9Bi

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php echo $title.$sep.$description; ?></title>
    <link rel="stylesheet" href="styles/bootstrap.min.css">
    <link rel="stylesheet" href="styles/bootstrap-theme.min.css">
    <link rel="stylesheet" href="mainStyle.css">
    <link href="https://fonts.googleapis.com/css?family=Yantramanav:400,700&amp;subset=latin-ext" rel="stylesheet">
</head>

<body class="bg-grey-3 grey-1">

<!-- HEADER -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid bg-purple-4">
        <div class="navbar-header"><a class="navbar-brand orange-1" href="index.php">LifePro Online</a>
            <div class="menus" id="myGroup" role="navigation">
                <div id="account-btn">
                    <button type="button" class="btn navbar-toggle" data-toggle="collapse" data-target="#account-menu"><span class="sr-only">Toggle account menu</span><span class="glyphicon glyphicon-menu-hamburger"></span>
                    </button>
                </div>
                <div id="char-btn">
                    <button type="button" class="btn navbar-toggle" data-toggle="collapse" data-target="#char-menu"><span class="sr-only">Toggle character menu</span><span class="glyphicon glyphicon-user"></span>
                    </button>
                </div>
                <div id="social-btn">
                    <button type="button" class="btn navbar-toggle" data-toggle="collapse" data-target="#social-menu"><span class="sr-only">Toggle social menu</span><span class="glyphicon glyphicon-comment"></span>
                    </button>
                </div>

                <div class="collapse navbar-collapse col-xs-6 col-lg-4 pull-right" id="account-menu">
                    <ul>
                        <li class="bg-blue-0 purple-2"><strong>ACCOUNT</strong></li>
                        <li class="bg-blue-1"><a class="blue-4" href="characters.html">Settings</a>
                        </li>
                        <li class="bg-blue-0"><a class="blue-4" href="index.php?page=account">Log Out</a>
                        </li>
                        <li class="bg-blue-1"><a class="blue-4" href="characters.html">Report Bug</a>
                        </li>
                    </ul>
                </div>

                <div class="collapse navbar-collapse col-xs-6 col-lg-4 pull-right" id="char-menu">
                    <ul>
                        <li class="bg-blue-0 purple-2"><strong>CHARACTERS</strong></li>
                        <li class="bg-blue-1"><a class="blue-4" href="characters.html">Stats</a>
                        </li>
                        <li class="bg-blue-0"><a class="blue-4" href="account.html">Skills</a>
                        </li>
                        <li class="bg-blue-1"><a class="blue-4" href="characters.html">Details</a>
                        </li>
                    </ul>
                </div>

                <div class="collapse navbar-collapse col-xs-6 col-lg-4 pull-right" id="social-menu">
                    <ul>
                        <li class="bg-blue-0 purple-2"><strong>SOCIAL</strong></li>
                        <li class="bg-blue-1"><a class="blue-4" href="characters.html">Chat</a>
                        </li>
                        <li class="bg-blue-0"><a class="blue-4" href="account.html">Messages</a>
                        </li>
                        <li class="bg-blue-1"><a class="blue-4" href="characters.html">Forum</a>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
</div>

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>
<div id="sign-in">
    <div id="curr-user">

    </div>
    <div id="login-btns">
        <button type="button" class="btn btn-xs" data-toggle="modal" data-target="#login-modal">Log In</button>
        <button type="button" class="btn btn-xs" data-toggle="modal" data-target="#login-modal">Sign Up</button>
    </div>
    <div id="login-modal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    LOG IN
                </div>
                <div class="modal-body">
                    USERNAME:<br><br>
                    PASSWORD:<br><br>
                </div>
                <div class="modal-footer">
                    Login Button
                </div>
            </div>
        </div>
    </div>
    <div id="reg-modal">

    </div>
</div>

<!-- CONTENT -->
<div class="content">
    <h1 class="bg-grey-4">Become a pro at Life!</h1>
    <h2 class="bg-grey-4">An online Browser based multiplayer life simulation game</h2>
    <p class="bg-grey-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ea temporibus eius eos saepe excepturi quo id a, nam voluptatibus. Omnis possimus dolorem, ut ullam. Deleniti consectetur eos repellat praesentium!</p>
    <p class="bg-grey-4"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quam, officiis. Dignissimos assumenda commodi perferendis tenetur fugit excepturi magni. Nihil, ipsum soluta illo error quos hic minus laborum sunt laboriosam?</span><span>Quo consequuntur, excepturi eveniet mollitia voluptas tempore, ea sunt vel. Dolor inventore ea labore odit explicabo vitae, nesciunt et, quae qui quasi eius enim quaerat magnam earum, rerum voluptatem asperiores!</span></p>

    <div class="bg-grey-4">
        <p>Color Testing</p>
        <div class="row">
            <div class="col-xs-4">
                <ul>
                    <li class="bg-purple-0 blue-0">Testing</li>
                    <li class="bg-purple-1 blue-1">Testing</li>
                    <li class="bg-purple-2 blue-2">Testing</li>
                    <li class="bg-purple-3 blue-3">Testing</li>
                    <li class="bg-purple-4 blue-4">Testing</li>
                </ul>
            </div>
            <div class="col-xs-4">
                <ul>
                    <li class="bg-blue-0 orange-0">Testing</li>
                    <li class="bg-blue-1 orange-1">Testing</li>
                    <li class="bg-blue-2 orange-2">Testing</li>
                    <li class="bg-blue-3 orange-3">Testing</li>
                    <li class="bg-blue-4 orange-4">Testing</li>
                </ul>
            </div>
            <div class="col-xs-4">
                <ul>
                    <li class="bg-purple-0 purple-0">Testing</li>
                    <li class="bg-orange-1 purple-1">Testing</li>
                    <li class="bg-orange-2 purple-2">Testing</li>
                    <li class="bg-orange-3 purple-3">Testing</li>
                    <li class="bg-orange-4 purple-4">Testing</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="footer bg-grey-4">
    --- FOOTER ---
</div>


<!-- Scripts are loaded AFTER the page content -->
<script src="scripts/jquery-3.2.1.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="main.js"></script>

</body>
</html>

And here is My CSS

/* MY Palette link
   http://paletton.com/#uid=34L1o0krrvxh5GAmhzzvkqGySl1

   Colors (from light to dark)
    === Priamry Purple ===
        #801EA7  
        #AB62C8
        #913CB3
        #68098D
        #51046F

    === Secondary Blue ===
        #188E99 
        #5AB7BF
        #349DA6
        #047781
        #015D66

    === Secondary Orange === 
        #FB9124 
        #FFBC77
        #FFA74E
        #D56E05
        #A85500
*/

/*GENERIC STYLING*/
body{
    font-family: 'Yantramanav', sans-serif;
    padding-left: 10px;
    padding-right: 10px;
 }
h1, h2, h3, h4, h5, h6{
    color: #FFBC77;
    padding: 0.5%;
}
p, li{
    padding: 0.5%;
}
ul{
    list-style-type: none;
    padding: 0.5% 5%;
}
body div.content{
    margin-top: 70px;
    margin-bottom: 10px;
}
/*NAVBAR STYLING*/
.navbar-brand{
    font-size: 1.75em;
    font-weight: bold;
    text-align: center;
}
.navbar-collapse.collapse{
    display: none !important;
}
.navbar-collapse.collapse.in{
    display: block !important;
}
.navbar-default .navbar-toggle{
    background-color: #FFA74E;
    border-color: #FFBC77;
    color: #D56E05;
    display:block !important;
    position: fixed;
    top: 0;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0px;
    margin: 5px;
    text-align: center;
    font-size: 1.5em;
    line-height: 0;
}
.navbar-default #account-btn .navbar-toggle{
    right: 0;
}
.navbar-default #char-btn .navbar-toggle{
    right: 4rem;
}
.navbar-default #social-btn .navbar-toggle{
    right: 8rem;
}
.navbar-default .navbar-toggle .glyphicon{
    font-size: 2rem;
    top: 0px;
    right: 0px;
}
.navbar-default .navbar-toggle:active,
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover{
    background-color: #FFBC77 !important;
    border-color: #FFA74E;
    color: #FB9124;
}
.navbar-collapse{
    margin: 0;
    padding: 0;
    position: fixed;
    top: 50px;
    right: 0px;
}
.navbar-collapse ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.navbar-collapse li{
    text-shadow: none;
    font-size: 1.5em;
    font-weight: bold;
    margin: 0;
    padding: 0;
    padding-top: 2%;
    padding-left: 5%;
    width: 100%;
    height: 4rem;
    float: none !important;
}
@media (min-width: 768px){
    .navbar-collapse {
        width: 40% !important;
    }
}
.navbar-right > ul {
    float: none !important;
}
.collapsing {
    -webkit-transition: none;
    transition: none;
}

/*BREADCRUMB / LOGIN $ REGISTRATION BAR*/
.breadcrumb{
    position: absolute;
    top: 51px;
    left: 0px;
    width:100%;
    padding: 0px 15px;
    background-color: #047781;
    border: 2px solid #015D66;
    border-radius: 0px;
    color: #5AB7BF;
}
.breadcrumb a{
    color: #5AB7BF;
}
.breadcrumb .active, .breadcrumb li + li:before{
    color: #349DA6;
}
#sign-in{
    position: absolute;
    top: 55px;
    right: 1%;
}
#login-modal .modal-dialog{
    width: 75%;
    height: 75%;
    position: fixed;
    top: 20;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
    text-align: center;
    color: #FFBC77;
}
#login-modal .modal-header{
    font-weight: bold;
    font-size: 2em;
    background-color: #51046F;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border: 1px solid #51046F;
}
#login-modal .modal-body{
    background-color: #AB62C8;
    border: 3px solid #51046F;
}
#login-modal .modal-footer{
    font-weight: bold;
    font-size: 2em;
    background-color: #51046F;
    text-align: center;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border: 1px solid #51046F;
}

/*BACKGROUND COLOR CLASSES*/
.bg-purple-0 { background-color: #AB62C8 !important } 
.bg-purple-1 { background-color: #913CB3 !important }
.bg-purple-2 { background-color: #801EA7 !important }
.bg-purple-3 { background-color: #68098D !important }
.bg-purple-4 { background-color: #51046F !important }

.bg-blue-0 { background-color: #5AB7BF !important }
.bg-blue-1 { background-color: #349DA6 !important }
.bg-blue-2 { background-color: #188E99 !important }
.bg-blue-3 { background-color: #047781 !important }
.bg-blue-4 { background-color: #015D66 !important }

.bg-orange-0 { background-color: #FFBC77 !important }
.bg-orange-1 { background-color: #FFA74E !important }
.bg-orange-2 { background-color: #FB9124 !important }
.bg-orange-3 { background-color: #D56E05 !important }
.bg-orange-4 { background-color: #A85500 !important }

.bg-grey-0 { background-color: #aaaaaa !important }
.bg-grey-1 { background-color: #777777 !important }
.bg-grey-2 { background-color: #444444 !important }
.bg-grey-3 { background-color: #1a1a1a !important }
.bg-grey-4 { background-color: #111111 !important }

/*COLOR CLASSES*/
.purple-0 { color: #AB62C8 !important }
.purple-1 { color: #913CB3 !important }
.purple-2 { color: #801EA7 !important }
.purple-3 { color: #68098D !important }
.purple-4 { color: #51046F !important }

.blue-0 { color: #5AB7BF !important }
.blue-1 { color: #349DA6 !important }
.blue-2 { color: #188E99 !important }
.blue-3 { color: #047781 !important }
.blue-4 { color: #015D66 !important }

.orange-0 { color: #FFBC77 !important }
.orange-1 { color: #FFA74E !important }
.orange-2 { color: #FB9124 !important }
.orange-3 { color: #D56E05 !important }
.orange-4 { color: #A85500 !important }

.grey-0 { color: #aaaaaa !important }
.grey-1 { color: #777777 !important }
.grey-2 { color: #444444 !important }
.grey-3 { color: #1a1a1a !important }
.grey-4 { color: #111111 !important }

Upvotes: 0

Views: 1536

Answers (1)

Younis Ar M
Younis Ar M

Reputation: 941

Please find the plunkr solution :

https://plnkr.co/edit/PPIREe142MFHyGrLi99B?p=preview

.content{
  padding-top : 30px;
}

and used bootstrap cdn

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><script src="scripts/jquery-3.2.1.js"></script>

Upvotes: 1

Related Questions