When you want to make several images listed side-by-side horizontally and re-size those images according to devices accessing.
We develope PHP, html and CSS to customize wordpress based home page.
For CSS, “
.d1 {
display:flex;
width:100%;
}.d1 img {
width: 33%;
align-self: flex-start;
display:flex;
text-align:center;
}
“
“d1” is class name at html.
At html, “
<p class=”d1″>
<img src=”image1.jpg”>
<img src=” image2.jpg ” >
<img src=” image3.jpg “>
</p>“
“align-self: flex-start;” in CSS will set these images nicely listed at safari browser of iphone. Otherewise, ratio of images was not controlled right.