• Resolved iamPariah

    (@iampariah)


    What CSS (or other) code do I need to add to the child theme in order to get the archive list of custom post types to display like a standard post archive? Specifically, I want to show two posts side-by-side on larger screens and only a single post on smaller screens. Currently custom post types don’t follow that behavior.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter iamPariah

    (@iampariah)

    Blog posts show up in two columns on wide screens, one column on small screens.

    Custom post types show up in one column at all times. I want them to show just like blog posts–two columns on wide screens, one column on small screens.

    Any link to any example page so I can see what is going on in the CSS?

    Thread Starter iamPariah

    (@iampariah)

    Thanks, Alexander.

    Here’s a standard blog post list showing as you wrote the theme. It shows in 2 columns on wide screens and drops to one column on mobile-sized screens. http://dev.iampariah.com/iampariah2014/blog

    I got this custom post type archive to float into 2 columns with the following CSS in the child theme (the .webinars comes from the content.php <article id=”post-<?php the_ID(); ?>” <?php post_class(‘group’); ?>>):

    .post-list .post,
    .post-list .webinars {
    width: 50%;
    float: left; }
    }

    That shows in two columns, but when the browser narrows to mobile size, it STAYS as 2 columns instead of going to 1 column. http://dev.iampariah.com/iampariah2014/webinars

    Try adding this as well:

    @media only screen and (max-width: 719px) {
    .post-list .webinars { width: 100%; }
    }

    Or in full:

    .post-list .webinars { width: 50%; float: left; margin-bottom: 40px; }
    @media only screen and (max-width: 719px) {
    .post-list .webinars { width: 100%; }
    }

    Thread Starter iamPariah

    (@iampariah)

    That did it. Thank you.

    Hi there Alexander!

    I had the same issue using CM Tooltip plugin I was able to fix it with your suggerence, great!

    There’s still a problem. The excerpt for Custom Types seems to not get truncated at all, it shows the full content of the glossary term entre. That makes the post list look ugly.

    Do you have any tip about how could I address that?

    Thanks a lot!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Make Custom Post Types List Work Like Posts’ is closed to new replies.