Twitter Bootstrap Question posted in

Twitter bootstrap – Website not centering on mobile

I have my website looking all snazzy on desktop but on mobile it just looks terrible the page is pushed to the left and the centering is completely broken

here is my code

Index.php:

<!DOCTYPE html>




<!-- I know my codes messy -->
<!-- If you dont agree and want to -->
<!-- Hire me just need someone to speak to or think you can help -->
<!-- Shoot me a email: [email protected] -->
<!-- Or you can tweet me: @MarleyJPlant -->




<html>
    <head>
        <meta name="description" content="MarleyJPlant Graphic Design Coding And Gaming" />
        <meta name="keywords" content="Marley Joseph Plant, MarleyPlant, Marley Plant, Marley, Arduduck, Simon Hedley, YRS, Young Rewired, Rewired State, Young Rewired State, YRS 2015, Best In Design, MarleyJPlant, Young Rewired Winner" />
        <meta name="author" content="metatags generator">
        <meta name="robots" content="index, follow">
        <meta name="revisit-after" content="1 days">
        <link rel=”author” href=”https://plus.google.com/u/1/101486183104153864417/”/>
        <title>Marley Joseph Plant</title>
        <!-- Marley Plant, Marley Joseph Plant, MarleyJPlant -->

        <meta content='width=device-width, initial-scale=1' name='viewport'/>
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://raw.githubusercontent.com/kswedberg/jquery-smooth-scroll/master/jquery.smooth-scroll.js">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/navigate.js"></script>
        <script type="text/javascript" src="js/Icons.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    </head>
    <body>
        <div class="MainPart">
        <div class="title">
            <center><h1 class="title" >Marley Plant</h1></center>
        </div>
        <br />
        <br />
        <br />
        <br />
        <br />
        <div class="social">
            <center>
                <a href="http://facebook.com/MarleyJPlant"  alt="Facebook" class="fa fa-facebook fa-5x Icon"></a>
                <a href="http://twitter.com/MarleyJPlant"  alt="Twitter" class="fa fa-twitter fa-5x Icon"></a>
                <a href="http://github.com/MarleyPlant"  alt="Github" class="fa fa-github fa-5x Icon"></a>
                <a href="http://blog.marleyplant.com"  alt="WordPress" class="fa fa-wordpress fa-5x Icon"></a>
                <a href="https://vine.co/u/1245502532772581376" alt="Vine" class="fa fa-vine fa-5x Icon"></a>
                <a href="https://www.youtube.com/channel/UCDoR3fPDtLjqgR_9fNPt_mw" alt="youtube" class="fa fa-youtube-play fa-5x Icon"></a>
                <a href="http://steamcommunity.com/id/Flaffle" alt="steam" class="fa fa-steam fa-5x Icon"></a>
                <a href="https://www.flickr.com/photos/134060533@N05/" alt="Flickr" class="fa fa-flickr fa-5x Icon"></a>
                <a href="http://instagram.com/marleyjplant/"  alt="Instagram" class="fa fa-instagram fa-5x Icon"></a>
                <a href="http://stackoverflow.com/users/5330908/marleyjplant?tab=profile" alt="Stack Overflow" class="fa fa-stack-overflow fa-5x Icon"></a>
            </center>
        </div>
    </body>

</html>

main.css:

.title{
    color: #5E6973;
    font-family: universe;
    text-align: center;
    font-size: 125px;
}

.MainPart{
      position: relative;
      top: 50%;
      transform: translateY(50%);
}

body{
    background-image: url("/images/background.jpg");
}

::-webkit-scrollbar { 
    display: none; 
}

.Icon{
    text-decoration: none;
    padding-right: 40px;
    padding-bottom: 30px;
    color: #7CFFC4;
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow:hidden;
}

.Icon:hover{
    -webkit-transform:scale(1.5,1.5);
    -moz-transform:scale(1.5,1.5);
    -o-transform:scale(1.5,1.5);
}

@font-face {
    font-family: universe;
    src: url('Universe.ttf');
}

.social{
    align: center;
}

.jumbotron{
    background-image: url("/images/background2.png");
}

you can find a live version over at http://marleyplant.com
I have checked the centering on my iphone 5 and my nokia lumia 920 both look the same

i’m using these library’s:

FontAwesome
Jquery
Bootstrap

Tags:

2

Answers


  1. 0

    The large text is only left-aligned when the words are too long to fit.

    The icons have padding-right but no padding-left, so they are never centered. You don’t notice it as much on a wide screen, but it becomes obvious on a narrow screen.

    (I also noticed that while you have prefixed properties, you have sometimes forgotten the real property, for example transform in .Icon)

    Login or Signup to reply.
  2. 0

    First off, the center tag is deprecated.

    Secondly, you’re not vertically centering correctly.

    You need to make your .MainPart position: absolute and change transform: translateY(50%) to transform: translateY(-50%).

    That will bring up the horizontal centering issue, which you would need to add left: 50% and change translateY(-50%) to translate(-50%, -50%);

    Working example: http://codepen.io/anon/pen/WQLKva

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search