What is causing the colorful background to not fully cover my page when I make the window smaller?

I'm currently designing a webpage that features a dynamic gradient background. Within this webpage are two columns - one displaying an image of a phone, and the other containing text. In full screen mode, everything looks perfect. The gradient stretches to cover the entire background while the photo sits nicely next to the text:

However, when I resize the page horizontally, the text ends up going beneath the image (which is expected), but unfortunately, the gradient fails to cover the entire page as shown below:

If you'd like to take a look at my code and see what might be causing this issue, check out the complete jsfiddle linked here: https://jsfiddle.net/cj37qamw/

In my CSS stylesheet, I've included the following code snippet:

#gradient {
  width: 100%;
  height: 100vh;
}

I would have thought this should do the trick, but alas, it's not working as intended. Can anyone provide some guidance on why this isn't behaving as expected?

javascripthtmlcss

Answer №1

UPDATED ANSWER BASED ON FEEDBACK:

After some further investigation, I believe I have discovered the solution: https://jsfiddle.net/xh7L4rvt/1/

1.) The Javascript selector has been modified to apply the gradient to the body instead of #gradient.

2.) Changes were made in the CSS as follows:

html,
body {
  background-color: #333;
  height: 100%;
  overflow: auto;
}

and 

#gradient {
  width: 100%;
  height: 100%;
}

Answer №2

Ensure that the html and body tags have the same width and height as your #gradient ID:

html,
body,
#gradient {
  width: 100%;
  height: vh%; /* Adjust this value based on your requirements */
}


var colors = new Array(
  [62,35,255],
  [60,255,60],
  [255,35,98],
  [45,175,230],
  [255,0,255],
  [255,128,0]);

var step = 0;
//color table indices for: 
// current color left
// next color left
// current color right
// next color right
var colorIndices = [0,1,2,3];

//transition speed
var gradientSpeed = 0.002;

function updateGradient()
{
  
  if ( $===undefined ) return;
  
var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];

var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "rgb("+r1+","+g1+","+b1+")";

var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "rgb("+r2+","+g2+","+b2+")";

 $('#gradient').css({
   background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
    background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});
  
  step += gradientSpeed;
  if ( step >= 1 )
  {
    step %= 1;
    colorIndices[0] = colorIndices[1];
    colorIndices[2] = colorIndices[3];
    
    //pick two new target color indices
    //do not pick the same as the current one
    colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
    colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
    
  }
}

setInterval(updateGradient,10);
html,
body {
  height: 100%;
  background-color: #333;
}
body {
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
  -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
  box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner {
  display: table-cell;
  vertical-align: top;
}
.cover-container {
  margin-right: auto;
  margin-left: auto;
}

/* Padding for spacing */
.inner {
  padding: 30px;
}

/*
* Cover
*/

.cover {
  padding: 0 20px;
}

@media (min-width: 768px) {
  
  /* Start the vertical centering */
  .site-wrapper-inner {
    vertical-align: middle;
  }
  /* Handle the widths */
  
  .cover-container {
    width: 100%; /* Must be percentage or pixels for horizontal alignment */
  }
}

@media (min-width: 992px) {

  .cover-container {
    width: 700px;
  }
}

#gradient {
  width: 100%;
  height: vh%; /* Adjust this value based on your requirements */
}

@media only screen and (max-width: 500px) { /* change max with to your needings */
    html,
    body {
      width: 100%;
      height: vh%;
    }
}
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>

<div id="gradient">

  <div class="site-wrapper">

    <div class="site-wrapper-inner">

      <div class="cover-container">

  

        <div class="inner cover">
          <div class="col-md-6">       
              <img src="http://mockuphone.com/static/images/devices/apple-iphone6-gold-portrait.png" class="img-responsive">             
          </div>
  <div class="col-md-5">
             <div class="description">
<h4>header</h4>
<p>test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text </p>
              </div>
          </div>
        </div>

      </div>

    </div>

  </div>

</div>

UPDATE: included media query.

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

What is the best way to display uploaded images on the server side in a browser using the MEAN stack?

I am currently utilizing the MEAN stack to develop an application that allows users to upload images, preview them, and save them in a MongoDB database via a server implemented with Express. Furthermore, I aim to retrieve these images from the server and d ...

angularjshtmlmongodbexpressfilereader

Is it possible to retrieve any user data by id using Vue 3 Firebase Auth?

I'm a newcomer to vue/firebase and I've been able to easily access the "current user" data from authentication. However, I am struggling to write a JavaScript composable that can retrieve the user object or at least displayName when passing in an ...

javascriptfirebasevue.jsfirebase-authenticationvuejs3

I experienced issues with the brackets software freezing up while using the Bootstrap min CSS file

Recently, I've been using brackets as my text editor and have run into an issue with the bootstrap.min CSS file. For some reason, it keeps freezing whenever I try to load it in brackets. Oddly enough, HTML files work perfectly fine, but ...

cssadobe-brackets

Guide on sending files and data simultaneously from Angular to .NET Core

I'm currently working on an Angular 9 application and I am trying to incorporate a file upload feature. The user needs to input title, description, and upload only one file in .zip format. Upon clicking Submit, I intend to send the form data along wit ...

javascriptc#angulartypescript.net-core

Is there a feature in impress.js that allows for navigating to the following slide easily?

Impress.js is an innovative web presentation tool created with Javascript. I am interested in setting up custom events to navigate through the slides. This could involve adding buttons for "Next" and "Previous", for example. The impress.js file itself fun ...

javascript

Using Angular expressions, you can dynamically add strings to HTML based on conditions

I currently have the following piece of code: <div>{{animalType}}</div> This outputs dog. Is there a way to conditionally add an 's' if the value of animalType is anything other than dog? I attempted the following, but it did not ...

javascripthtmlangularjs

Switching up the Label Colors in Chart.JS

It's been a while since my last question, so please bear with me if I'm not following the rules. I've attached my current code and a reference image of the chart. I am completely new to working with ChartJS. The situation is a bit unique: t ...

javascripthtmlcsschart.js

The issue with using useState on arrays is that it is not functioning properly with React Hooks

const [LatestNews, setLatestNews] = useState([]); useEffect(() => { async function fetchLatestData() { const result = await database.collection('latestnews').get(); result.docs.forEach(doc => ...

javascriptreactjsreact-hooks

Unable to display returned data from an AJAX request made with jQuery autocomplete

After reviewing the debug developer tool, I noticed that the ajax request returned data but for some reason, the data is not being displayed in the text box. The data contains special characters which are visible in the provided image. I am trying to iden ...

javascriptphpjqueryajaxcodeigniter

Is it feasible to utilize Google Calendar API for JavaScript through npm install? Alternatively, can the Google Calendar API be utilized for Node.js in the browser within Next.js?

Looking to integrate the Google Calendar API as a library in your Next.js project without using _document.tsx? I have explored two potential approaches for achieving this: Utilize the google calendar api for JavaScript by installing it via npm Use the goo ...

javascriptnode.jsnext.jsgoogle-calendar-api

The body parser is preventing the NODE from loading on localhost

var express = require('express'); var app = express(); var bodyParser = require('body-parser'); //ISSUE LINE **app.use(parser.json);** /////////////// var todos = []; var nextTodoItem = 1; app.use(bodyParser.json); ap ...

javascriptnode.jsbashexpress

Expand the scope of the javascript in your web application to cater

I am in the process of creating a web application that utilizes its own API to display content, and it is done through JavaScript using AJAX. In the past, when working with server-side processing (PHP), I used gettext for translation. However, I am now ...

phpjavascriptajaxinternationalizationgettext

The function 'transformArticles' is not recognized as a property of the object 'Article'

I'm encountering an issue with Typescript that I need help understanding. In my code, I have a route where I am importing a class called Article like this: import { Request, Response } from "express"; const appRoot = require("app-root-path"); import ...

javascripttypescript

Fancybox is experiencing some technical difficulties

Can anyone help me troubleshoot why my fancybox code isn't working properly after adding the script below to the body? Any thoughts on what might be causing this issue? $(document).ready(function() { $("a#example4").fancybox({ 'opa ...

jqueryhtml

When using @mouseover, it is not possible to modify a variable's value

The hover event is not functioning properly in this Vue component. Although I was able to call a function on hover successfully, I encountered issues when trying to change the hover variable directly. <template> <div @mouseover="hover = t ...

javascriptvue.js

Mastering various mathematical operations in Vue.js

I am attempting to calculate the percentage of a value and then add it back to the original value using Vue.js. Here is an example: 5 / 100 * 900 + 900 = 945.00 (standard calculation) 5 / 100 * 900 + 900 = 90045 (Vue.js calculation) This is the code I ha ...

javascriptvue.js

Encountering a problem with displaying error messages in an empty text field

I am facing an issue with displaying error messages when a text field is left blank. I would like a simple message, such as "can't be empty", to appear below the text field in red color when the user clicks the submit button and leaves multiple fields ...

javascriptphphtmlmessagebootstrap-modal

jQuery alert: A TypeError was caught stating that the object being referred to does not have the 'dialog' method available

For a few days now, I have been tirelessly searching for a solution to this issue and it has caused me quite a bit of stress. My problem lies in echoing a JQuery popup script within php: echo '<link rel="stylesheet" href="http://code.jquery.c ...

phpjavascript

Learn the process of displaying and concealing elements when hovering over the parent element with Javascript

I am facing a challenge with my containing div that has a 'h1' title and a 'p' description inside it. My goal is to have the 'description paragraph' hidden while the 'title' is visible when the page loads, and to hav ...

javascriptjqueryhtmlcss

referencing a fixed value within a JSP drop-down selection

My JSP contains a dropdown menu, and instead of manually inputting the values as text, I want to retrieve constants from a specific class. Here is an excerpt from my constants class called master.dao.util.MasterDataConstants //DIVISIONS FOR DROPDOWN p ...

javahtmljspconstants