As someone who is new to HTML/CSS, I recently developed my first website using the Cargo platform.
Within a section on my site featuring various videos, I encountered difficulty in properly positioning the titles over them while ensuring they remain responsive.
Upon viewing the website on wide monitors, I noticed that the titles appeared somewhat misaligned, and on mobile devices, they were completely out of place. Despite attempting to implement a grid layout, I was unable to achieve the desired result.
Below is an example of the messy HTML & CSS code I used for the videos and titles.
To gain a better understanding of my issue, you can visit the website at constantinesko.com/Sounds-1.
UPDATE: Thanks to the helpful response provided below, I have successfully wrapped my videos with their corresponding titles, ensuring responsiveness. However, I am now facing an issue where I am unable to align the titles to the left of each video. I attempted to use text-align:"left";, but it did not work as expected. Additionally, when trying to move the titles using left:50%; or transform: translate(-50%,-50%);, the responsiveness is compromised.
For instance, utilizing left:15%; results in:
27-inch monitor ()
Wide monitor ()
<div class="video-container">
<div class="vcontainer">
<video id="vid1" preload="auto" onloadstart="this.volume=0.9" onmouseover="this.play()" onmouseout="this.pause()" loop="loop" width="100%" height="240px" poster="https://freight.cargo.site/t/original/i/75971115b3c32e4fdff42672cceb851cec352ac0d47b9fa22e985591df3f80ec/Metron_01_Cropped_Thumpnail.png" class="">
<source src="https://skovideos.s3.us-west-2.amazonaws.com/9+Sec+Metron+01+Cropped.mp4" type="video/mp4">
</video>
<div class="title">
<a href="https://constantinesko.com/Metron-01%22%3E">
<div class="linkbox"> METRON 01 </div></a>
</div>
</div>
.video-container {
display: flex;
flex-direction: column;
justify-content: center;
}
.vcontainer {
width: 100%;
height: 240px;
position: relative;
margin-bottom: 2%;
}
.title {
width: auto;
height: auto;
display: block;
position: absolute;
font-family: "Monument Grotesk Variable", Icons;
font-size: 2vw;
font-style: normal;
font-weight: 400;
font-variation-settings: 'slnt' 0, 'MONO' 0;
animation-duration: 1.5s;
animation-name: slidein;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 3;
}
#vid1{
width: 100%;
height: 240px;
z-index: 2;
}