While working within a Wordpress post, my goal is to insert two images side by side with the block of images centered, one aligned left and the other aligned right (which I have achieved).
As the page size decreases, I want the images to stack on top of each other (which I have also achieved).
However, the issue arises when the images are stacked, as they are not centered on the page in this responsive mode. One image is aligned left and the other image is aligned right.
I have experimented with various image alignments within Wordpress, but I am unable to find the right combination that works.
Below is my HTML code:
<div class="ps-image-container">
<div class="ps-inner-image-container">
<div class="ps-responsive">
<img src="https://passports. ... " class="alignleft" />
</div>
<div class="ps-responsive">
<img src="https://passports. ... " class="alignright" />
</div>
</div>
</div>
and here is the CSS code:
.ps-image-container {
display: block;
/*width: 98%;
margin: 0 auto;*/
}
.ps-inner-image-container {
/*display: block;*/
width: 98%;
margin: 0 auto;
}
.ps-image-container::after {
content: "";
display: table;
clear: both;
}
.ps-responsive {
width: 49.99999%;
float: left;
}
@media only screen and (max-width: 500px){
.ps-responsive {
width: 100%;
}
}
It seems like there is a fundamental concept that I am overlooking.