Issue
After searching around for a few hours, I hope someone can help me with this case.
I want to achieve this effect on multiple images across a post. The HTML content is already created, and I can't modify or add an element to it. I can only play with CSS.
Problem : Each image have different height size, meaning height can change depend on the image. Do I need to use the calc property?
figure.size-full {
border: 2px solid #bcc6b4;
padding: 0;
}
.wp-block-image img {
height: auto;
max-width: 100%;
vertical-align: bottom;
}
.wp-block-image figcaption {
margin-top: .5em;
margin-bottom: 1em;
font-style: italic;
}
figure.wp-block-image:before{
width: 2000px;
height: 1px;
background-color: #bcc6b4;
display: block;
content: "";
position: relative;
top: 32px;
right: -100%;
z-index:-1;
}
<figure class="wp-block-image size-full">
<img loading="lazy" src="vitamineA.jpg" alt="test image" class="wp-image-34340" >
<figcaption>Aliments riches en vitamine A</figcaption>
</figure>
Thank you very much for your help
Solution
You can try css flex. If it doesn't work as expected, increase the selector weight or make the properties as important.
figure.wp-block-image {
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
}
Answered By - JShobbyist
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.