Twitter Bootstrap Question posted in

Full screen bootstrap webpage only taking up half of display-Twitter bootstrap

I’m trying to create a very basic version of a CMS, and I’m using a page that gives an html template and allows the user to create their own text and image uploads to show the screen they create on a display elsewhere.

The template works and it stores what it should but my problem is this:

When I send the template to it’s own webpage to view on another screen (computer, tv, phone, ,etc.) The entire page is only showing on the left half of the screen, perfectly half of the screen no matter what.

I’ve tried removing all external CSS and scripts just to be safe but it makes no difference. The only difference is that from the templating page I”m removing my global navigation menu which wraps everything on it’s pages, but I just want this webpage (using bootstrap 4 grid) to fill the page

Picture of it in templating:
enter image description here

and live:
enter image description here

I just want the body of the page to fill the entire viewport of whatever device it is, but it’s just filling half which is strange. Is it painfully obvoius what I’m doing wrong here?

<!DOCTYPE html>
<html>
<head>
  <title>Template One</title>

  <style type="text/css">
    html,
    body {
      height: 100vh;
      width: 100vh;
    }

    .my-container {
      display: flex;
      flex-direction: column;
      height: 100vh;
      width:100vh;
    }

    .my-container>.top [class^="col-"],
    .my-container>.bottom [class^="col-"] {
      background-color: #929292  ;
      color: white;
      text-align: center;
    }

    .my-container>.middle {
      flex-grow: 1;
      padding:30px;
      background-image: url('images/bg6.jpg');
      background-size: cover;
    }

    .my-container>.middle>* {
    }

    #clock{
        /*background-color:#333;*/
        font-family: sans-serif;
        font-size:40px;
        text-shadow:0px 0px 1px #fff;
        color:#fff;
    }
    #clock span {
        color:#fff;
        font-size:40px;
        position:relative;

    }
    #date {
      margin-top: -10px;
        letter-spacing:3px;
        font-size:20px;
        font-family:arial,sans-serif;
        color:#fff;
    }
  </style>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" crossorigin="anonymous">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
  <script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>

</head>
<body onload="startTime()">

<!-- Container -->
<div class="container-fluid my-container">
  <!-- Top Row -->
  <div class="row top">
    <div class="col-lg-12">
      <div class="row">
        <div class="col-lg-3">
          <img style="height: 100px;width: 250px;" src="/images/img.svg">
        </div>
        <div class="col-lg-6">
          <a class="weatherwidget-io" href="https://forecast7.com/en/35d16n84d88/?unit=us" data-label_1="" data-label_2="WEATHER" data-days="3" data-theme="original" data-basecolor="" > WEATHER</a>
        </div>
        <div class="col-lg-3 align-self-center">
          <div id="clockdate">
            <div class="clockdate-wrapper">
              <div id="clock"></div>
              <div id="date"></div>
            </div>
          </div>      
        </div>
      </div>
    </div>
  </div>
  <!-- Middle Row -->
  <div class="row middle">
    <div class="col-lg-6" >
      <div style="background-color: white; height: 100%;"><p>Left</p></div>
    </div>
    <div class="col-lg-6"  >
      <div style="background-color: white; height: 100%"><p>Right</p></div>
    </div>
  </div>
  <!-- Bottom row -->
  <div class="row bottom">
    <div class="col-lg-12">
      <div class="marquee"><h2>This is a test</h2></div>
    </div>
  </div>
  <!-- end container -->
</div>

</body>
</html>
Tags:

2

Answers


  1. 0

    This could possibly a reason why:

    .my-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vh;      /* Problem here! */
}

    The width and height are set in this class for some reason, which is messing up with the .container-fluid class. And your width is set to equal the viewport’s height.

    Also, you have this one in your body:

    width: 100vh;

    You have set your body‘s width to be the viewport’s height. Change it to vw.

    Login or Signup to reply.
  2. 0

    I solved it by changing the styling for the html, body and .myContainer. Here was what I did:

    html,
body {
  margin: 0 auto;
  height: 100%;
  width: 100%
}

.my-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width:100%;
}

    I added a margin 0 auto to get rid of any other styles (you could also user normalize) and changed your values from vh to %. Voila! I also got rid of your body startTime() since it was throwing an invalid reference error.

     html,
    body {
      margin: 0 auto;
      height: 100%;
      width: 100%
    }

    .my-container {
      display: flex;
      flex-direction: column;
      height: 100%;
      width:100%;
    }

    .my-container>.top [class^="col-"],
    .my-container>.bottom [class^="col-"] {
      background-color: #929292  ;
      color: white;
      text-align: center;
    }

    .my-container>.middle {
      flex-grow: 1;
      padding:30px;
      background-image: url('images/bg6.jpg');
      background-size: cover;
    }

    .my-container>.middle>* {
    }

    #clock{
        /*background-color:#333;*/
        font-family: sans-serif;
        font-size:40px;
        text-shadow:0px 0px 1px #fff;
        color:#fff;
    }
    #clock span {
        color:#fff;
        font-size:40px;
        position:relative;

    }
    #date {
      margin-top: -10px;
        letter-spacing:3px;
        font-size:20px;
        font-family:arial,sans-serif;
        color:#fff;
    }
    <!DOCTYPE html>
<html>
<head>
  <title>Template One</title>

 

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" crossorigin="anonymous">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
  <script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>

</head>
<body>

<!-- Container -->
<div class="container-fluid my-container">
  <!-- Top Row -->
  <div class="row top">
    <div class="col-lg-12">
      <div class="row">
        <div class="col-lg-3">
          <img style="height: 100px;width: 250px;" src="/images/img.svg">
        </div>
        <div class="col-lg-6">
          <a class="weatherwidget-io" href="https://forecast7.com/en/35d16n84d88/?unit=us" data-label_1="" data-label_2="WEATHER" data-days="3" data-theme="original" data-basecolor="" > WEATHER</a>
        </div>
        <div class="col-lg-3 align-self-center">
          <div id="clockdate">
            <div class="clockdate-wrapper">
              <div id="clock"></div>
              <div id="date"></div>
            </div>
          </div>      
        </div>
      </div>
    </div>
  </div>
  <!-- Middle Row -->
  <div class="row middle">
    <div class="col-lg-6" >
      <div style="background-color: white; height: 100%;"><p>Left</p></div>
    </div>
    <div class="col-lg-6"  >
      <div style="background-color: white; height: 100%"><p>Right</p></div>
    </div>
  </div>
  <!-- Bottom row -->
  <div class="row bottom">
    <div class="col-lg-12">
      <div class="marquee"><h2>This is a test</h2></div>
    </div>
  </div>
  <!-- end container -->
</div>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search