How to Adjust CSS Animation Background to Fully Cover Responsive Height

Hi there! I've been working on adding some CSS code to my ReadyMag project, but I'm having trouble with odd aspect ratio browser windows. The code I have is almost doing what I want, but it's not covering the full width and height. How can I make sure it covers both dimensions?

<div class="colorchange"></div>
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst
{
0%   {background: #FF85E5; left:0px; top:0px;}
25%  {background: #D8F0FB; left:0px; top:0px;}
50%  {background: #EAFFE9; left:0px; top:0px;}
75%  {background: #FFFEDE; left:0px; top:0px;}
100% {background: #F3E9FF; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes myfirst
{
0%   {background: #FF85E5; left:0px; top:0px;}
25%  {background: #D8F0FB; left:0px; top:0px;}
50%  {background: #EAFFE9; left:0px; top:0px;}
75%  {background: #FFFEDE; left:0px; top:0px;}
100% {background: #F3E9FF; left:0px; top:0px;}
}

/* CSS for the text */

.colorchange {
  max-width: 100%;
  min-height: 100%;
  margin: 0;

/* Chrome, Safari, Opera */
-webkit-animation-name:myfirst;
-webkit-animation-duration:10s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/* Standard syntax */
animation-name:myfirst;
animation-duration:20s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
}

I've experimented with different .colorchange attributes, including just width: 100%, width 100%, and height 100%, as well as setting both max and min heights to 100%, and using height: 100vh;

If you have any suggestions or advice, please let me know. Thank you!

Answer №1

It appears to me that the root cause may be related to browser computed styles. Different browsers apply default styles to selectors which can impact the appearance of elements on a webpage. Many developers choose to eliminate these default styles by using a CSS Reset.

Introducing a CSS reset midway through development can be quite tedious as it removes all computed styles, potentially causing visual regressions in elements that were previously styled based on those styles. This would require thorough testing to ensure everything looks as intended.

That being said, there are two potential approaches:

  1. Utilize a CSS Reset and rectify any affected styles
  2. Eradicate computed styles for the specific element you are targeting

If you opt for the second option, here are some steps to consider:

  1. Inspect the box model diagram of the .colorchange element using a web inspector
  2. Ensure there are no margins, paddings, or borders affecting the element
  3. If present, remove them accordingly

Hopefully, this troubleshooting method will resolve the issue you are facing within this particular context.

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

Angular's browser animation feature allows for smooth slide-up animations from the bottom

I have been experimenting with creating a simple animation, and it's working, but in the opposite direction of what I intended. I want the div to open from bottom to top and close from top to bottom. Here is my animation code in Angular: animations: ...

I've encountered an issue when attempting to use innerHTML for DOM manipulation

I've been attempting to remove a specific list item <li> from the inner HTML by assigning them proper IDs. However, I'm encountering difficulties in deleting it. How can I delete these list items after clicking on the cross button? Feel fr ...

What is the best way to swap out text for an image in CSS?

I came across a website that I am working on: The site features a slider with 2 tabs named "TAB1" and "tab2" My goal is to replace the text with unique images for each tab Below is the CSS code snippet: .dnd-tabs.dnd-tabs-style1 .ui-tabs-nav li.ui-tabs ...

What is the best way to create a unique background shape for Bootstrap 4 carousel controls?

Hello, I am currently working on a Bootstrap 4 Carousel where my controls are replaced by arrow images. I am attempting to create an oval-shaped background for the arrows as shown in this picture. However, I am facing issues with adjusting the border to ...

Tips for adjusting div content to fit a fixed height on all devices

Looking to adjust the size of the #left-content div based on the height of the window, while ensuring that all content is visible within the fixed #left-bg. However, when viewing on mobile or tablet devices, the content appears hidden. .left-bg{ backgro ...

The Material UI button feature neglects to account for custom CSS styles when attempting to override the default settings

Utilizing a custom bootstrap css styles in my react app, I am seeking to enhance the default material ui components with the bootstrap styles. import React, {useState} from 'react'; import 'cg-bootstrap/core/build/cg-bootstrap-standard.css&a ...

The res.download() function in Express is failing to deliver the accurate URL to the client

When trying to utilize the res.download() method for downloading specific files from a server, there is an issue where triggering the res.download does not redirect the client to the correct URL. The files intended for download are located in a directory s ...

Trouble with the mobile layout - styling with CSS

Having an issue with the mobile view CSS. Visit: Looking to shift the navigation button to the right and widen the logo without changing its height. Any assistance would be appreciated. Thank you, ...

creating a div element with a height that matches its content dimensions

I'm having trouble creating a navigation bar because the outer div isn't matching the height of the unordered list inside it. I attempted using display:inline-block as well, but it didn't solve the issue. Here is the HTML: http://jsfiddle ...

Is there a simpler method to enable built-in CSS-Sass in Next.js without the need for excessive configuration?

Is there a way to maintain the built-in CSS/SASS feature in Next.js without extensive configuration? Utilizing the built-in CSS/SASS is convenient, but introducing less to next.config.js triggers the disabling of this feature, requiring manual configurati ...

The dimensions of the HTML table do not adjust properly when new items are being appended using JavaScript

I utilized this HTML Code to generate a table: <div class="noten_tabelle"> <table id="grades_table" style="width:100%"> <tr> <th>Subject</th> <th>Oral</th&g ...

Unable to view Bootstrap Icons in Gulp 4

I recently integrated the new bootstrap icons npm package into my project using Gulp 4, the latest version. Everything was installed successfully and was working smoothly. However, I encountered an issue when trying to declare the icon in my index.html fi ...

Elevate a div over another div

I have a situation where I need to nest two divs inside another div with the ID "video-wrapper". Here is the HTML code: <div class="row"> <div class="video-wrapper col-lg-2"> <div class="video-thumbnail"> <img ...

Windows and MacOS each use unique methods for displaying linear gradients

Check out this code snippet featuring a background gradient background: rgba(0,0,0,0) linear-gradient(rgb(245, 245, 245),rgba(0,0,0,0)) repeat scroll 0 0; This code renders correctly on Windows (chrome, ie, firefox) https://i.stack.imgur.com/XU2gW ...

Show a compact graphic in the upper-right-hand corner

Hey, I have this interesting idea but CSS isn't my strong suit. Any thoughts on how to achieve it? I'm looking to create a new class that, when applied to an item (like a div), displays a small clickable pre-defined image in the Top-Right corne ...

Adjust item size and move them into the panel

I am looking to create a panel that arranges items in a specific layout shown here: https://i.stack.imgur.com/qw3lS.png Below is the code I have attempted so far: import React, { useCallback, useEffect } from "react"; import { Box, Grid, Tab, T ...

What is the best way to customize the styles of a reusable component in Angular2?

I am working with a reusable component called "two-column-layout-wrapper" that has its styles defined in the main .css file. In another module, I need to use this component but customize the width of two classes. How can I override these styles? import ...

Image carousel with variable height

I'm attempting to implement a slide show of images with previous and next functionality. When the user clicks "previous," I want the images to slide to the left, and when they click "next," I want the images to slide to the right with a 0.5 second del ...

How is it possible for flex-direction to function correctly even when display: flex is not explicitly defined

I'm unsure if it is required to specify the display property when the flex-direction is set in a container. Everything seems to be working fine without it, but I'm concerned that I might be causing issues: .App { background-color: white; ...

What are some ways I can optimize my Bootstrap CSS code to enhance responsiveness across different page widths?

After creating this fiddle, I noticed that my webpage layout with two texts stacked on top of each other looks great on wide screens. However, when the screen size is reduced or viewed on a mobile device, the layout gets all messed up. Take a look at this ...