My issue is with a video and some content underneath. When I reduce the height of the video on mobile, there is too much white space below it.
@media only screen and (max-width: 600px) {
video {
height: 80%;
}
Instead of adding margin-bottom to fix this, I believe I need to wrap the video in a container to control the entire video section including h2 elements for all screen sizes. You can view the code snippet here: https://jsfiddle.net/4v9fk7uq/
The issue causing a gap between the <main> and video is the min-height: 100vh property applied to #fashion.
To fix this, you can reduce the min-height of #fashion to 80vh.
Here's the updated code snippet -
container {
position: absolute;
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
div#fashion {
min-height: 80vh; /* Updated min-height value */
display: flex;
align-items: center;
justify-content: center;
}
h1 {
font-family: Moderne Sans, sans-serif;
text-align: center;
font-size: 2rem;
width: 100%;
letter-spacing: .5rem;
}
h2 {
z-index: 1;
font-family: Century Schoolbook, Century Schoolbook L, Georgia, serif;
font-size: 8vmin;
text-align: left;
margin: 2rem 3rem 0;
position: absolute;
bottom: 20%;
color: #fff;
font-weight: 100;
}
@media only screen and (max-width: 600px) {
video {
height: 80%; /* Reduced height for smaller screens */
}
h2 {
position: absolute;
bottom: 20%;
}
div#fashion {
min-height: 80vh; /* Updated min-height value for smaller screens */
}
}<div class="container">
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/fashion.jpg" playsinline autoplay muted loop>
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/fashion.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/fashion.mp4" type="video/mp4">
</video>
<div id="fashion">
<h2>The new kids on the block.</h2>
</div>
</div>
<main>
<h1>example content
</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo dolorum totam dicta quidem eaque quos neque, dolor numquam itaque placeat! Id quia at officia, accusamus placeat vero sed ea quo voluptates....</p>
</main>By changing the style from:
video {
height: 80%;
}
to
video {
height: 100%;
}
you can eliminate any spacing issues
I'm encountering a template parse error with my Angular 2 component using the following template: <div *ngIf="chapter == 1"> <p><h4><br><b>Exercise</b>: Get the Groceries starting point<br></h4 ...
After creating a page with React.jsx, I encountered an issue where my page was initially opening index.jsx upon running npm start. However, when I deleted and then restored the index.html file to "public", the page started opening index.html instead. This ...
I am facing a challenge with hosting a next.js app within the file structure of a parent website. I need the CSS in the app to use images that are located outside the app's file structure but within the parent website's file structure. Here is a ...
When working with an HTTP service and binding JSON data to HTML, I implemented the following code: This function uses a 2-second timer to automatically fetch data whenever there is a change in the backend. function sampleDevices ...
Having some issues with a custom product badge on my website. I tried adding a new badge (besides "Sale"), but it seems to be displaying in the wrong position. The badge should display as "Choice" on the featured products, so I added this code to the chil ...
Recently, I came across an interesting API file that caught my attention: My goal is to extract information from this API and present it on a HTML page in a visually appealing format. Despite scouring various forums, I have yet to find a solution that fi ...
I'm facing an issue with my CSS code and I need your help to figure out what's wrong. I believe it's a simple problem that someone can quickly identify just by looking at the code. Any assistance would be greatly appreciated! Here is the co ...
I have the following files: /public/index.html <!DOCTYPE html> <html> <head> <title>Planner</title> <script src="../codebase/library.js" charset="utf-8"></script> <link hre ...
I am attempting to create a 'snow' effect on the background of a particular div with a red border. Here is the code, but you can also view it here: <!-- language: lang-js --> var width = getWidth(); var height = getH ...
I recently had an issue resolved that fixed most of my concerns: I needed to make three separate edits, and now when I reintroduce the other two edits, they are included within the table section and scroll along with the table instead of being stuck beneat ...
I noticed that when I open object X and Y, they have the same fields, tabs, and checkboxes. However, I am confused as to why the IDs of the checkboxes and other elements are different. Can you explain what gwt-uid(number) means? Please take a look at the a ...
Trying to solve a unique problem here as none of the proposed solutions on similar questions have worked for me. Apologies if I'm missing something, I'm new at this. The issue is with loading an empty div on my page using javascript and strings ...
Within my ng-repeat loop, I have set a custom attribute like this: <div ng-repeat="item in itemsList" stepType="{{item.stepType}}"> {{item.itemValue}} </div> The possible values for item.stepType are 'task' or 'action ...
This image illustrates the grid layout I have created an angular UI using kendo that features a nested grid. I am trying to apply CSS specifically to the child grid without affecting the parent grid. However, no matter what CSS I write, it ends up being a ...
I have recently come across a fascinating effect where an image glows up when the mouse hovers over it. This is not your typical border glow, but rather a unique enhancement of colors within the image itself. I discovered a library called Pixastic that can ...
Currently, I am utilizing a Content Management System (CMS) along with a form builder extension. This particular extension grants me the ability to execute PHP scripts upon page load. Furthermore, I have the option to include custom 'Additional Attri ...
Check out the codes here body{ margin: 0; } .logo { text-indent: -999999px; background: url('logo3.png'); width: 216px; height: 219px; } .header{ width: 100%; height: auto; background-color: #eef3f5; padd ...
I currently have a code snippet that replaces a span class with a hyperlink. The hyperlink contains an abbreviation, and the alternate text for the link also includes the same abbreviation. Now, I am looking to replace the second abbreviation in the alte ...
I currently have a bootstrap textbox set up like this: <input type="text" class="span9" required name="input_text"/> My goal is to increase the height of my input box to 300px. The width, on the other hand, is being handled by span9. I utilized In ...
I am looking to apply CSS to a dynamically generated div ID. var status = var status = item.down().next().innerHtml(); if(status == "test") { var c = 'item_'+i ; c.style.backgroundColor = 'rgb(255, 125, 115)'; //'ite ...