Custom Post Type UI
[resolved] Custom Posts stack on top of each other. Put in a horizontal row? (1 post)

  1. schoolspeak
    Posted 4 years ago #

    I know how to use CSS to float things left and therefore have them fall into a horizontal line, but it's not working. There's obviously something I need to override in the plugin. Here's what's going on:

    With the Custom Post Type UI plugin, I have created a Custom Post Type called "Projects". I have a few "Project" posts now. All of them sit together within a 1000px-wide wrapper on a template page.

    Each custom post is 277px x 277px. In my CSS, I can control the posts by adding styles to the element .type-projects. When that element is floated left, in theory all the posts should line right up. But they don't.

    ***** APPROACH #1: *****

    I styled the element containing the post like this:

    .type-projects {
    border: 15px solid #3B555A;
    margin:20px 20px 20px 0;

    ***** RESULT *****
    The border shows, and the post is inside, so the custom posts respond to the styling. But floating this element to the left did nothing.

    So I tried:

    ***** APPROACH #2 *****

    I went into the WordPress dashboard. With the plugin, I had created the Custom Post Type "projects". I clicked one of the projects. Where you add the content (under the title) when creating a "project", I went into html view and created:

    <div class="customPostWrap">

    Then in my CSS, I targeted that DIV like so:

    .customPostWrap {
    width: 400px;

    ***** RESULT *****

    Again, I can see that the element exists on my template page. I can change the padding and it moves around, etc. But now all the "customPostWraps" stack above each other. Help!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Custom Post Type UI
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic