This topic contains 1 reply, has 2 voices, and was last updated by Doug Edgington 5 years, 9 months ago.
-
Posts
-
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/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
The forum ‘Design Tips and Tricks’ is closed to new topics and replies.