Create a horizontal list rather than vertical

  • Unknown's avatar
    kirstenhwhyte1 · Member ·

    I have set up the display-posts shortcode on my recipe child pages, but having just purchased the design upgrade, I would like to change the layout of the lists so that they are in a grid arrangement rather than a list (in order to take up less space on the page). I would also like the title to be under the thumbnail rather than next to it. Is there a way to do this using CSS? I have trawled the internet but can’t find anything helpful. Can anyone help me? Please!

    The blog I need help with is: (visible only to logged in users)

  • jblz · Staff ·

    This tutorial is pretty good for making horizontal lists:
    http://css.maxdesign.com.au/listutorial/horizontal01.htm

    Cheers :)

  • Unknown's avatar
    kirstenhwhyte1 · Member ·

    Thanks, but I had already found that tutorial and it doesn’t help me because it refers to a list of words only. I have thumbnails and titles that I want to re-arrange. There must be a way, but it is driving me nuts trying to work it out!

  • jblz · Staff ·

    Can you share an example of what you’re trying to accomplish on http://codepen.io/ or a similar service?

  • Unknown's avatar
    kirstenhwhyte1 · Member ·

    Forgive me, I am new at this code lark.

    This is what I have – http://thepinkrosebakery.com/recipes/savoury/

    This is what I want – http://thepatternedplate.com/recipe/

    Any ideas?

  • Unknown's avatar
    designsimply · Member ·

    http://thepatternedplate.com/recipe/ is actually setup using WordPress’ built in gallery feature with the titles and links below the images added as captions via the Media > Library section in the dashboard. One way they get it to look especially “grid-like” is by using images with mostly the same dimensions and titles that are short enough to fit on one line so the heights aren’t very variable.

    Your http://thepinkrosebakery.com/recipes/savoury/ page uses the display posts shortcode, so it’s not setup the same way but you can get something similiar-ish looking using custom CSS to set a fixed width for each box and floating them all to the left. Here is an example:

    .display-posts-listing .listing-item img {
	max-width: 132px;
}
.display-posts-listing .listing-item {
	float: left;
	margin-right: 8px;
	width: 148px;
	height: 240px;;
}

    You may want to adjust some of the number values. Just experiment with them until everything looks good to you.

    Note that the height has to be at least as tall as the tallest content, otherwise the floated elements will start stacking funny and won’t look right. The “Smoked Brie” image is pretty tall and the title below the image falls to three lines, so that’s the tallest chunk for now. Swapping out that one for a shorter image would let you shorten up the spacing for the rows above it so there’s not a ton of white space below them.

  • Unknown's avatar
    kirstenhwhyte1 · Member ·

    Thank you so much! This is exactly what I wanted. The code has worked just as I want it to. There are a couple of featured images to change, as you mentioned, but other than that it is perfect. Thanks again!

  • Unknown's avatar
    designsimply · Member ·

    Awesome! I loooove food blogs, especially when they have really good pictures and very cute names like “hummingbird cake”! I’m glad you’re here on WordPress.com. :)

  • Unknown's avatar
    kirstenhwhyte1 · Member ·

    Thank you, I like being here! :)

  • The topic ‘Create a horizontal list rather than vertical’ is closed to new replies.