A large responsive bootstrap website filling only half the screen

I am currently in the process of developing a simple version of a Content Management System (CMS). I have created a page that offers an HTML template, allowing users to insert their own text and image uploads to display on another screen.

The template functions correctly and stores the necessary data. However, my issue lies in the following:

When I send the template to its dedicated webpage to view it on a separate screen (such as a computer, TV, or phone), the entire page only appears on the left half of the screen, perfectly split down the middle regardless of the device.

I have attempted to remove all external CSS and scripts for troubleshooting purposes, but this action does not resolve the problem. The only change made is the removal of the global navigation menu present on other pages, as I desire this specific webpage (utilizing Bootstrap 4 grid) to occupy the full screen

Screenshot while templating: https://i.sstatic.net/I1IFr.png

Live preview: https://i.sstatic.net/CkpIg.png

My goal is for the body of the page to span the entirety of the viewport on any given device. Despite my efforts, it continues to display as only half the screen's width which appears rather perplexing. Do you notice an obvious mistake that could be causing this issue?

<!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{
        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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb9c92919c94bbcad5c2d5cd">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfabbaabb7baad9feef1edf1eb">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a4aaa9a4ac83f2edfaedf5">[email protected]</a>/js/gijgo.min.js"></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>
htmlcssbootstrap-4

Answer №1

One possible explanation:

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

The width and height properties are defined within this class for an unknown reason, causing conflicts with the .container-fluid class. Additionally, the width is erroneously set to match the viewport's height.

Moreover, you have a similar declaration in your body:

width: 100vh;

Your body's width has been configured to mirror the viewport's height. Consider adjusting it to utilize vw instead.

Answer №2

I was able to resolve the issue by making adjustments to the styling of the html, body, and .myContainer elements. Here's what I did:

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

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

To eliminate any conflicting styles, I added a margin of 0 auto (you could also consider using a normalization technique) and converted the values from viewport height (vh) to percentage (%). This resolved the issue caused by your body startTime() function which was triggering 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="baddd3d0ddd5fa8b9483948c">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="562233223e3324166778647862">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcbbb5b6bbb39cedf2e5f2ea">[email protected]</a>/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>
          </dv>      
        </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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vue Quasar Drawer Layout with Bottom Bar

Struggling to implement a footer in my q-drawer. Below is the template and component code I am currently using: <template> <q-layout view="hHh lpR fFf"> <q-header elevated> <q-toolbar> <q-btn flat de ...

cssvue.jsquasar-framework

IE7 is not applying the conditional CSS styles to content loaded through AJAX

I am currently tackling some challenges with IE7 compatibility in a Rails application that I am developing. It appears that CSS styles implemented from a stylesheet applied with a conditional comment are not being rendered properly when using HAML like thi ...

htmlcssajaxinternet-explorer-7

Switch up the functionality of Bootstrap tooltips: show all the content and only hide it when hovered over

I have a page containing multiple tooltips that I would like to show all at once. All of the tooltips share a class called "tooltipWarn." <span class='warning tooltipWarn'>test</span> Using JQuery: $('.tooltipWarn').toolti ...

jquerybootstrap-4tooltip

The AngularJS component materializes almost instantaneously

Using AngularJS, I have developed an application where a certain section of code is displayed after the page loads for a split second: <div class="col-sm-4" data-ng-repeat="user in users"> <div class="card"> ...

javascripthtmlangularjs

How to style a webpage to be printed in CSS with A4 dimensions

Whenever I try to print my webpage, I encounter an issue where everything changes on the printout. I would like to be able to print a webpage that looks exactly like what is displayed on the screen. Here is an example of what I am looking for: enter imag ...

cssbootstrap-5

Adjust the background hue of the Row in the Table

Is there a way to update the background color of a Table Row? I attempted using "BackgroundColor" but didn't see any changes Any suggestions on how to fix this issue? <TableRow style={{ backgroundColor: "#FF0000" }}> <TableCell& ...

cssreactjsmaterial-uireact-table

In the latest version of Bootstrap, the carousel has been redesigned to smoothly transition across the entire page, providing a

I am currently in the process of learning Bootstrap 5 and decided to create a simple carousel by referring to the official documentation on Bootstrap 5 Carousel. Following their instructions, I copied their code and integrated it into my template. Howeve ...

htmlcsscarouselbootstrap-5

Is the item positioned above another item instead of being positioned to the left of it?

Looking for help with my mobile navigation setup. I want to add text that says ' ...

htmlcsshandlebars.js

What causes hyperlinks to fail in certain emails when opened in new tabs on Outlook Webmail?

After opening an email in a new tab on Chrome from Outlook 365 web app, I noticed that some hyperlinks stop working. Strangely, for certain emails I received, the hyperlinks work fine. I create these emails using Power Automate and the HTML code I use is: ...

htmlcssgoogle-chromeoutlook-web-app

"Maintaining Consistency: Ensuring The First Row is Repeated on Every

When trying to save a PDF using jspdf, I encountered an issue with tables in my HTML. The tables do not have headers, but JsPDF is automatically repeating the first row of the table on every page, causing overlap. I don't want headers on every new pag ...

javascriptangularjshtml

Tips for generating numerous sub div tags using jQuery

Is there a way to achieve this output with jQuery? I have working code here: . (See image for reference: https://i.stack.imgur.com/eOXiN.png) When trying to replicate the same using jQuery, I encountered an issue where there is no spacing between two imag ...

jqueryhtmlcss

I am experiencing difficulty with the Click() operation in Selenium web driver as it is not successfully redirecting me to another page

Hello everyone, I could really use your assistance with a problem I'm facing. WebElement wb=driver.findElement(By.name("NavHeader1$tabs$ctl00$btnNavHeaderTab")); Actions act=new Actions(driver); act.moveToElement(wb).perform(); ...

javascripthtmlseleniumselenium-webdriver

I'm curious if there is a specific jQuery event that triggers right before an element loses focus or right before the next element gains focus

I am facing a situation where I have two input elements in a form that are closely connected. The first element triggers an ajax call to check for existing data in the database when the user tries to move away from it, while the second element opens a moda ...

javascripthtmljqueryfocusblur

JavaScript Tutorial: Updating the maximum value of a gauge chart

Is there a way to dynamically change both the total and max values in my current code? The maximum value needs to be dynamic based on the filter applied. Here is the code snippet: resource1=[ "//cdn.jsdelivr.net/raphael/2.1.0/raphael-min.js", "//cd ...

javascripthtmlgaugejsgauge

JavaScript Tutorial: Storing HTML Text in the HTML5 Local Storage

I am looking to save the text that is appended using html() every time I click on a button. The goal is to store this text in HTML 5 local storage. $('#add_new_criteria').on('click',function(){ $('#cyc_append').html(&apo ...

javascriptphpjqueryhtml

Attempting to remove an attribute or property in JavaScript will not yield the desired result

When I try to close the menu after opening it, the inline style won't get removed despite trying different methods. The CSS only has text properties for alignment and the class can-transform contains a media query. That's all the information I h ...

javascriptcssfunctiontoggleinline-styles

The issue of why padding left is not functioning correctly in Bootstrap version 5.3.1

</head> <body> <header class="bg-info "> <div class="container"> <div class="row text-white"> <div class="col-md-6 p-3 pl-6 "> ...

javascripthtmlcssbootstrap-5bootstrap-tags-input

When the radio button is selected, show a variety of buttons

I'm facing an issue with rendering different buttons for two radio buttons within a view. Here is the rendered HTML code for the radio buttons: <input checked="checked" id="Isattending_0" name="Isattending" type="radio" value="Yes" /> <inpu ...

javascriptjqueryhtmlasp.net-mvc

Is there a way to show a loading icon during the image change process without using jQuery?

How can I add a loading icon to an image change event without using jQuery? I'm new to the coding world and Stack Overflow community, so please bear with me. I've been searching for a solution to my specific situation but haven't been able ...

javascripthtmlcssimageloading

Update the parent element's class style within a targeted div media query

I am facing a challenge where I want the width of my .container element to be 100% when the screen size reaches 900px. The issue is that I have used .container on multiple pages and only wish to change its appearance within the #sub-top div. The terminolo ...

javascriptjqueryhtmlcss