I am trying to adjust the positioning of text on top of an image with a 40px margin. Additionally, I want to place two buttons on each side of the list item (one on the right and one on the left). Despite numerous attempts with various solutions, including the code below, I have not been able to achieve the desired result. The closest I've gotten is shown in the image below, but the buttons are still not positioned correctly. I aim to maintain this layout for every list item on the page.
CSS:
.container {
width: 100%;
}
.posts {
position: absolute;
top: 200px;
bottom: 0;
right: 30px;
margin: 0;
}
.post {
background-color: #606060;
border-radius: 30px;
width: 600px;
min-height: 300px;
float: right;
margin-bottom: 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
bottom: auto;
top: auto;
}
.img {
background-color: #606060;
background-repeat: no-repeat;
background-size: contain;
width: 90%;
height: 300px;
position: relative;
margin-bottom: 100px;
border-radius: 50px;
}
.content {
font-size: 15px;
text-align: left;
min-height: 120px;
position: relative;
left: 10px;
color: white;
font-weight: 700;
margin-top: 40px;
}
.comment {
background-color: #006FC4;
border: 1px solid #00508D;
font-size: 15px;
color: #FFFFFF;
padding: 5px;
border-radius: 7px;
height: 30px;
position: absolute;
bottom: 0;
float: left;
}
.like {
background-color: #006FC4;
border: 1px solid #00508D;
font-size: 15px;
color: #FFFFFF;
padding: 5px;
border-radius: 7px;
height: 30px;
position: absolute;
float: right;
}
HTML:
<div class="container">
<ul class="posts">
<li class="post">
<div class="content">Test</div>
<button class="comment" onclick="comment('posts/XiqNjxsov3hUXX1zJLk3ta7mQul2/userPosts/PkIm2NOhjOlTZk7J7Dyk')">Comment</button>
<button class="like" onclick="like('posts/XiqNjxsov3hUXX1zJLk3ta7mQul2/userPosts/PkIm2NOhjOlTZk7J7Dyk')">Like</button><<img class="img" src="https://firebasestorage.googleapis.com/v0/b/mysharify-4ea69.appspot.com/o/posts%2F6.png?alt=media&token=f1881e5e-e9f4-4e90-bf0f-f211a74ccd42 complex_formula_here""><</li><br><br>
<li class="post">
<div class="content">dasdasd</div>
<button class="comment" onclick="comment('posts/hg23gh1beGO7cpUvRSkKpqcY9O22/userPosts/TpiuWCRoZQliuhmlj1su')">Comment</button>
<button class="like" onclick="like('posts/hg23gh1beGO7cpUvRSkKpqcY9O22/userPosts/TpiuWCRoZQliuhmlj1su')">Like</button><</li><br><<br>
</ul>
</section>
Another Image Example:https://i.sstatic.net/ZXDgC.png