previous link with thumbnail: thumbnail stay in the same row

Sure! Exactly what you would do partly depends on the element hierarchy above the img and title elements, combined with how your theme behaves responsively. If the outer container is sized to only leave room for the images, the title ought to end up below no matter what else. Spans are normally inline style elements. Switching to a block style element like div will often cause a line break. You could alternately just insert an explicit br tag before the title’s span tag. You can even style the span elements of that particular class to display as block instead of inline, which would be equivalent to using divs.

Some of these solutions only involve CSS. Of course changing spans to divs or inserting breaks requires altering the code responsible for the output.

Thank you @bcworkz. I will try to play with the file as you said when I got a chance. Hopefully the theme is responsive enough so that I don’t have to write .css.

Hey bcworkz,

I have give it few trials as you suggested. Somehow my small thumbnails are still in the same line with the words. I assumes that I have to dig deeper into css files and possibly bootstrap.

But thanks a lot for your suggestions! They are very helpful in guiding to the right direction.

You’re welcome! FWIW, digging deeper is one solution, but probably not necessary. It depends on what you mean by “deeper”. You mainly would want to manage the container width so there is no room for text next to the images. I’m making a big assumption about how the page is structured. This may not apply at all, but it is a pretty typical situation. Even if not, the general process is the same, only what rules are applied to what element change.

Use your browser’s developer tool (CSS inspector or something like that) to determine the container element and its applicable CSS. Try various width properties until the page behaves as desired. You likely would want a width specification similar to how the image widths are specified so they all respond similarly at different view port widths.

You may need to also repeat the process for mobile devices because these often have specific CSS that is applied for only small screens. OTOH, small screens likely have everything in a single column and it’s not an issue.

Once you’ve determined the right width style, add it to the “Additional CSS” section of the theme’s customizer.

thank you a lot for the detailed walk through! I might just do that when I got a chance. I think it is css that I needed.