-2

Using Essential Grid plugin for WordPress theme development, I've created a masonry layout with cards which display all the post. Each card has an image, title, and so forth. With shortcodes, I've been able to add the same masonry layout found on the homepage to the post page. I've created a custom template for the post content. However, my custom template shows as the first post(which I want), but the other cards which are in the masonry layout are below it. I'm trying to have my custom post content card a part of the masonry layout, just not sure how.

Desired layout: 1 being my custom card template

1-2-3-4-5-6-7
8-9-etc..

Current Layout:

1
2-3-4-5-6-7

For better reference, I'm trying to achieve this type of layout using the Essential Grid plugin for posts.

closed as off-topic by Michael, Jacob Peattie, cjbj, bueltge, Jack Johansson Dec 26 '17 at 22:53

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • Can you please post code that outputs the grids and also provide me with a direct URL to the page where this is outputted. Both of which is required to resolve this issue. – Christine Cooper Dec 20 '17 at 18:32
  • I know this limits the help I can receive, however, I've asked the client for permission to share and was asked not too. – alyus Dec 22 '17 at 5:23
2

Since your client is not sharing any code what so ever, there is no genuine way for us to help you with this question (which should have been closed initially since it's centered around a third-party plugin).

Now, with that being said, to troubleshoot this, I would look into the following:

  1. Check if your CSS styling is in order. It may be a case of incorrect styling for the boxes, making the first one being in its own line. This is very likely the issue. Look into how to stack divs in a pinterest type of layout. There are a variety of options, and some of which may conflict in your current layout.
  2. Check the source of the outputted page (view source). Is the first box any different than the other ones. If so, that is very likely why it is on its own line. If all are identical in their div architectural structure, move on to the next step.
  3. Look into the actual source of code that generates the list of divs. What can you find there? Does the code add any particular classes to the first box? etc.

Trust me, this is as good as it gets without seeing the code.

Not the answer you're looking for? Browse other questions tagged or ask your own question.