I’m working on a WordPress page and I have this page where I need to get 15 pictures with text beneath them in 5 rows by three. I’ve done that, but now I need them to move one under another when resizing. It worked all well enough until I set the div for the pictures& text to be 30% wide.

Here’s my code

<div class="wrapper-ostale-storitve">
<div class="item-ostale-storitve">
<div><a href="#"><img  width="300" height="207" /></a></div>
<div><a style="color: #000;" href="#">Picture A</a></div>
</div>
<div class="item-ostale-storitve">
<div><img  width="300" height="207" /></div>
<div>PIcture B</div>
</div>
<div class="item-ostale-storitve">
<div><img  width="300" height="207" /></div>
<div>Picture C</div>
</div>
<div class="item-ostale-storitve">
<div><img  width="300" height="207" /></div>
<div>Picture D</div>
</div>
<div class="item-ostale-storitve">
<div><img   width="300" height="207" /></div>
<div>Picture E</div>
</div>
<div class="item-ostale-storitve">
<div><img  width="300" height="207" /></div>
<div>Picture F</div>
</div>
<div class="item-ostale-storitve">
<div><img  width="300" height="207" /></div>
<div>Picture G</div>
</div>
<div class="item-ostale-storitve">
<div><img  width="300" height="207" /></div>
<div>Picture H</div>
</div>
<div class="item-ostale-storitve">
</div>

Here’s a JSFiddle of my coding.

https://jsfiddle.net/nzdoLzkw/

I might also add that I write this code directly in a new page in wordpress, I’m not creating a new template. So it will be easier for the owner of the page to change text & Pictures later.
Thanks for any advice.

Read more here: Moving divs issue


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: