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
As I work on my fitness site, I wanted to incorporate a sponsor section. While exploring some code that matched the style of my website, I discovered this snippet below. However, being new to CSS, I struggled with fixing it to ensure that the images fit ...
Currently utilizing the Material UI next framework to construct a wrapper for the card component. This customized wrapper allows for personalization of the component. I have successfully extended the component so that the title and image within the card ca ...
I'm currently working on a website and I've encountered an issue with positioning. Within the content section, I have two main text boxes - one in the top left corner and one in the bottom right corner. However, when the browser window is resized ...
Is there a way to update data on the UI without having to refresh the screen in a web application built with Node.js? I'm looking to make only specific changes on the screen. Additionally, how can I ensure that the data displayed on the screen is upda ...
After successfully keeping the footer at the bottom of other pages on my website, I'm facing a challenge with my photo gallery page. The footer stubbornly sits in the middle of the page. :( This is the HTML code for that particular page: html { ...
I'm just starting to learn about HTML and I'm trying to create a header with a logo overlapping on an image slider. I followed the method mentioned in this post: How would you make two <div>s overlap? Unfortunately, I'm still having t ...
Hello, I'm new to coding and I need some help. Recently, I learned how to create forms in HTML and now I want to save and display the data using PHP. I followed along with some PHP exercises on a website called W3Schools, but when I tried to run the f ...
I am struggling to understand why the content in the right column is overlapping my footer. I believe it has something to do with a float, but I can't seem to pinpoint the exact issue. Could you please take a look at this page for me and provide some ...
I've set up a jQuery function that toggles the visibility of different divs when clicking on folder icons: $(document).ready(function() { $("#techfolder").click(function(){ $("#txt").toggleClass("d-none"); }); $("#persfolder").click(functio ...
I am currently working on aligning a picture and heading in a header section. My goal is to center both elements, with the picture being twice as tall as the heading. So far, I have them stacked one above the other: .body { font: 15px/1.5 Arial, Helveti ...
I need assistance with setting up a password for a form. Users should be able to enter a password into a specified field, click submit, and if the password is correct, they will be redirected to buybutton.php in the same window. If the password is incorr ...
I am uncertain about where the errors might be occurring. I have attempted to inspect MySQL, but it seems that nothing is being inserted into my database. To begin with, here is a snippet of my HTML code: <form action="registerAction" method="POST"> ...
Having one controller and two views presents a challenge. ClustersController angular.module('app.controllers').controller('ClustersController', [ '$scope', 'ClustersService', function($scope, ClustersService) { ...
I have developed a unique web application that allows users to place dots on a sitemap and link them to images. The technology stack includes Javascript, CSS, and HTML. phase1 Subscribed users are able to utilize a wide range of features which enable them ...
When utilizing the window.print method to print out a specific screen, I encountered an issue. I need to hide the date in the top left corner of the image as well as the title (not the big heading) which has been intentionally blurred. I've come acro ...
I am currently working on a PHP form and I am facing an issue with the drop-down boxes and checkboxes. I want them to stay filled even if I don't select something, maintaining the previously entered details while leaving the unfilled parts empty. I ha ...
I am seeking a solution to have a mat-spinner displayed on top of my app while it is in the loading state. Currently, I am using an overlay component with Overlay from @angular/cdk/overlay. The issue arises when part of the spinner that should be overlai ...
<html> <body> <button onclick="toggle()" class="nm" > main</button> <div class="cntnr" style="display : none;"> <ul class="cnkid"> <li class="cnkid"><a class="cnkid" ...
I have utilized Angular Material to create a vertical tab, and I would like to incorporate an Add Tab button within the tab listing itself. Currently, when I add the button, it appears at the bottom of the layout instead. For reference, you can access the ...
Curiosity has led me to ponder a question that may seem trivial. Consider this scenario: in my HTML or ASPX page, I include a comment for some JavaScript code. When the page loads, will the comments be rendered along with the rest of the page's conten ...