How can I make these images and text look right?

[SusanB]

I have a publishing company website (WarmHeartsPublishing.com) that is made up of all pages (no posts) and I need to be able to put up pics of my book covers with the title (and link) underneath in rows with 2, 3, or more books. I am new to using Genesis. I found that using table tags as I used to did not work well, especially on mobile devices so I am using the Column feature in Genesis. Here's an example of how I have coded some book covers and titles:

<div class="one-third first" style="text-align: center">

Book 1 Title
</div>
<div class="one-third" style="text-align: center">

Book 2 Title
</div>
<div class="one-third" style="text-align: center">

Book 3 Title
</div>

I have found that this approach looks good on a computer, but on a mobile device, the some of title text will appear next to the book cover image instead of below it and centered like it is supposed to be. By the way, I do not use the Genesis Featured Page option because it doesn't look right and doesn't do what I need it to do. So how can I put images of books up in rows with their title text centered beneath so that it looks good on PCs and mobile devices?

http://www.warmheartspublishing.com/

[Doug Edgington]

The text is likely wrapping around the image in responsive mode, because the items aren't in block level elements. Try putting the image and/or the text within a block level element such as a paragraph or div tag. Another options is to put a <br> tag after the image.

---

Doug Edgington
http://www.dougedgington.com

[Author]

Posts