0

I'm trying to add a list of recent posts in-line to WordPress pages using Visual Composer using the [display-posts] shortcode. However, whenever I do so, the title and link of the posts are displayed one column to the left of where they should be - the column I specify [display-posts] in just has either the date of the post (if requested with include_date="true"), or a blank bullet point (if not requested).

Does anyone know what I'm doing wrong here. I attach some screenshots as examples.

Visual Composer set up - the list of posts should be in the right column...

Visual Composer set up - the list of posts should be in the right column...

Result on page - the lins and post titles seem to have spilled over to the left column...

Result on page - the lins and post titles seem to have spilled over to the left column

Thank you for your help

Oliver Spencer
  • 2,021
  • 3
  • 16
  • 22
  • It seems like its CSS issue, you need to set display-post wrapper position relative and float:left, width:100%; surely your text will come into right column instead of overlapping the left. – Adeel Nazar Jun 25 '18 at 12:18
  • Hi - thanks for your help. I've created the following CSS for the page, and also modified the CSS reference in the display-posts item but it's still displaying incorrectly. The reference is working however, as if you change the width to 50%, the linked text moves to the right... Any other thoughts? .my-display-posts-format{ float:left; position: relative; width:100%; } [display-posts category="embed-growth" posts_per_page=3 include_date="true" order="ASC" orderby="title" wrapper="div" wrapper_class="my-display-posts-format"] – Oliver Spencer Jun 25 '18 at 12:48
  • thats strange it should work, can you please show me its firebug view how HTML structure is written? – Adeel Nazar Jun 25 '18 at 13:00

1 Answers1

0

Add this style in style.css actually .title class getting style from theme which conflicting with current structure with below code you can remove that.

.my-display-posts-format .listing-item .title{
    position:static;
    left:0;
}

It will surely work.

Adeel Nazar
  • 187
  • 2
  • 8