Vertically Centered Div Misaligned in Mobile (using flexbox)

Question

I used flexbox to vertically center my div. it works fine on the desktop, however does not work on mobile. It is centered in portrait orientation, however once titled to landscape, the text is no longer centered and is appeared cut off, where the user has to scroll to read the full text (see img below)

Please give me some advice on how to solve this. Thanks. I've tried putting overflow to hidden and that didn't work as well.

enter image description here

.vertical-align {
  height:auto;
  min-height: 100vh;

  /* Make it a flex container */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; 

  /* Align the bootstrap's container vertically */
  -webkit-box-align : center;
  -webkit-align-items : center;
  -moz-box-align : center;
  -ms-flex-align : center;
  align-items : center;

  -webkit-box-pack : center;
  -moz-box-pack : center;
  -ms-flex-pack : center;
  -webkit-justify-content : center;
  justify-content : center;

  flex-direction: row;

  width:100%;
  text-align: center;

  font-size: 0;
}

/*CONTENT*/
.container-fluid{
  margin:0 auto;
  padding:0;
  /*    padding:50px;

  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;

  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  */}
.left-col{
  padding-left:50px;
}
.right-col{
  padding-right:50px;
}
#story_text{
  font-size: 18px; 
}
/*story*/
#story_text{
  text-align:left;

  height:100%;
  padding-left:50px;
  padding-right:50px;
}
#pictures{
  text-align: right;
}

    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="viewport" content="width=device-width, user-scalable=no" />

<body>
    <div class="container-fluid">
      <div class="row vertical-align">
        <div class="col-lg-4 col-md-3 col-sm-2 col-xs-12, left-col"></div>
        <div class="col-lg-4 col-md-6 col-sm-8 col-xs-12" class="content">
          <p id="story_text">
            The Daily Roundup is the anchoring café at The Working Capitol serving the needs of the TWC community, the immediate vicinity and crepe aficionados across the island. Borne out of our desire to create something truly distinct in the café scene in Singapore. Instead of serving typical brunch items, we have consulted with one of the foremost prestigious French chefs in Singapore to perfect our crepe offering.
            <br><br>
            The result is a tightly curated list of classic crepes and spritzers serving a largely unmet need in the market: lighter, healthier options for the increasingly conscious palette.
          </p>
        </div>
        <div class="col-lg-4 col-md-3 col-sm-2 col-xs-12, right-col"></div>
      </div>
    </div>
</body>

--EDIT

additional jQuery added, to detect change of height of flexbox

jQuery(document).ready(function(){

    var jQuery(window)      = jQuery(window),
    jQuery(sections)    = jQuery('vertical-align'),
    windowHeight;

    function adjustHeight() {

        // get height of browser window on page load and resize events
        windowHeight = jQuery(window.height());

        // apply windowHeight to each <section>
        jQuery(sections.height(windowHeight));

    }

    jQuery(window.resize(function() {
        adjustHeight();
    }));

    jQuery(window.load(function() {
        adjustHeight();
    }));

});

What is "bootstrap flex box"? Also, you have commas in your class values. — isherwood, Jun 23 '15 at 16:15
@isherwood see this post http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3, just means flexible box layout — user3453264, Jun 23 '15 at 16:39
Did you check if the browser of your mobile supports flexbox? — Oriol, Jun 23 '15 at 17:07
@oriol I'm using chrome so it should work, because it works on the desktop — user3453264, Jun 24 '15 at 01:45

Dickens A S · Answer 1 · 2015-06-24T05:41:20.920

0

There are few issues with mobile web-kit view port, I would recommend you put a reset as follows

html, body {
   width: 100%;
   height: 100%;
   max-height: 100%;
   max-width: 100%;
   border: 0 0 0 0;
   padding: 0 0 0 0;
}

Which might make vh and vhw work properly

-- EDIT --

I think you are missing an important <meta> tag, put the following meta, after that even without the 100% fix it will work properly in your mobile

<meta name="viewport" content="width=device-width, initial-scale=1">

edited Jun 24 '15 at 05:41

answered Jun 23 '15 at 17:36

Dickens A S

3,824
2
22
45

thank you for your suggestion. I've already got on included. Should I add in one under the media queries for mobile? – user3453264 Jun 24 '15 at 01:49
You are missing the html viewport scale meta tag, please check my edit – Dickens A S Jun 24 '15 at 05:41
Hi I've intially already had these metatags: – user3453264 Jun 24 '15 at 08:06
I realise that it might be the issue that the flexbox is not detecting the change in mobile orientation, hence I tried setting up jQuery but keep receiving an error. Could you guys help me to see if there's any issue with my code. Thanks – user3453264 Jun 24 '15 at 11:58

Vertically Centered Div Misaligned in Mobile (using flexbox)

1 Answers1