I’ve a created a page which has video and links of the video to play and the link element with div class part-links here and i want to align that under the video element with display inline effect just like this:
If any one could solve this problem I would be very thankful and it would be great
here’s the code:
@import url('https://fonts.googleapis.com/css2?family=Teko&display=swap');
* {
margin: 0;
padding: 0;
}
body {
background-image: linear-gradient(130deg, rgb(230, 124, 71), rgb(197, 166, 62));
height: 900px;
}
.hdlg {
display: flex;
justify-content: center;
align-items: flex-end;
}
.hdlg>img {
width: 22vw;
height: 29vh;
border-radius: 15px;
margin-top: 8px;
}
.slg {
display: flex;
justify-content: center;
font-family: 'Teko', sans-serif;
font-size: 20px;
}
.brd {
display: flex;
border: 2px solid rgb(98, 96, 96);
;
width: 39%;
position: absolute;
left: 31%;
right: 0%;
justify-content: center;
align-items: flex-end;
}
.cont {
display: flex;
background-color: rgba(221, 207, 173, 0.605);
width: 95%;
height: 87%;
margin-top: 10px;
margin-right: 15px;
margin-left: 20px;
margin-bottom: 10px;
padding-top: 10px;
border-radius: 10px;
text-align: center;
border-bottom: 4px solid white;
border-right: 4px solid white;
border-left: 4px solid white;
border-top: 4px solid white;
}
#vid-player {
width: 65%;
height: 60%;
margin: 0 auto;
}
.prtd {
display: inline;
width: 80px;
height: 60px;
margin: 10px auto;
padding: 10px;
background-color: #7ba758;
border-radius: 5px;
cursor: pointer;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
height: 12vh;
font-size: 17px;
margin-right: 20px;
margin-left: 20px;
padding: 17px;
border-radius: 8px;
text-align: center;
}
@media screen and (max-width: 500px) {
.hdlg>img {
width: 48vw;
height: 25vh;
}
.slg {
font-size: 27px;
}
#thmb {
width: 60vw;
height: 36vh;
}
.box {
width: 62vw;
height: 48vh;
font-size: 18px;
}
.box:hover {
height: 51vh;
font-size: 20px;
}
.cont {
margin-right: 0px;
margin-left: 2px;
margin-top: 15px;
}
.brd {
width: 45%;
left: 28%;
right: 0%;
}
}<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vid</title>
</head>
<body>
</head>
<body>
<div class="hdlg">
<img src="log0.png">
</div>
<span class="slg"><h2>logo</h2></span>
<span class="brd"> </span>
<div class="cont">
<video id="vid-player" controls>
<source src="part1.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<div class="prtd">
<a class="alnk" href="#" data-src="part3.mp4">Part 4</a>
<a class="alnk" href="#" data-src="part.mp4">Part 1</a>
<a class="alnk" href="#" data-src="part.mp4">Part 2</a>
<a class="alnk" href="#" data-src="part3.mp4">Part 3</a>
</div>
</div>
</body>
</html>Thank you !
2
Answers
You need to put a flex-direction: column in your .cont. This will make them the video and your buttons align vertically.
If you want your buttons to align horizontally you need to remove width: https://www.w3schools.com/cssref/css3_pr_flex.php
To make them seperate just remove the background color from .prtd and add it to .alnk
You can achieve the desired result by adding
flex-direction: columnto thecontclass. That will change the direction in which flex items are rendered. You can also remove the uncessarywidthandheightattributes fromprtdclass if you want them to be on the same row like in the screenshot.Edit:
Changed the
heightofprtdclass to be65%(same as video) and changed display toflexto allow forjustify-content: space-around;Edit 2:
I recommend you read up on how flex-box works, it will really help you implement your designs better and with less css jargon. I have found this to be useful in the past.