I am currently trying to customize the appearance of divs that are displayed on the front page. https://i.sstatic.net/BsEaM.png
My platform is WordPress, and my goal is to have each new post align alternately left and right starting with the first post.
This was my initial attempt:
echo '<div class="popImage">';
the_post_thumbnail();
echo '</div>';
I tried using :nth-child(odd) and :nth-child(even) to style them. However, after adding a third post, the layout broke and the box appeared next to the first post.
I'm unsure if I'm approaching this correctly or if there's a better way to achieve what I want. Any advice would be greatly appreciated.
Here is the CSS code that didn't work as intended:
.popImage {
width: 15rem;
height: 15rem;
background-color: #3700ff;
display: inline-block;
}
.popImage:nth-child(even) {
float: left;
}
.popImage:nth-child(odd) {
float: right;
background-color: yellow;
}