Layout support

[richardjmanning]

I understand this is a custom dev things but I was wondering if you could offer advice, I know your layout system is priority and to my knowledge this is where the issue lies.

Okay, So I am attempting to display some info pull from a db I am using php to do so and then just echo to display this using pro elements. however they display funny.

http://easyeat.me/recipes/
Here is my code - the desired output is for three columns in a masenry style so they can all be slightly bigger or smaller than eachother and the columns will still line up.

echo'<div class="e326-15 x-column x-sm x-1-3">

<img class="recipe_img" src="'.$RecipieImage.'" width="640" height="480">

  <div class="item-meta-box">
    <span><i class="fa fa-clock"></i> 10 mins</span>
		<span><i class="fa fa-utensil-spoon"></i> 2 Yield</span>
		<span><i class="fa fa-comments"></i> 2 comments</span>
	</div>

  <div class="e326-18 x-text x-text-headline">
    <span class="x-text-content"><span class="x-text-content-text"><h1 class="x-text-content-text-primary">'.$RecipieName.'</h1></span></span>
  </div>

  <div class="e326-19 x-text">'.$RecipieDescription.'</div>

  <a class="e326-20 x-anchor x-anchor-button" tabindex="0" href="view-recipe/?id='.$RecipeID.'"><span class="x-anchor-content"><span class="x-anchor-text"><span class="x-anchor-text-primary">View recipe</span></span></span></a>

</div>';

[christopher]

Hi there,

As you mentioned this is not part of our theme features and considered as a custom development and outside of our support scope. We will do our best to help you regarding this.

You can not have a masonry layout without injecting Javascript library which will need lots of coding. But if you want to have a simple 3 column layout you will need to add your information to a structure like this:

<div id="cs-content" class="cs-content">
  <div class="x-section">
    <div class="x-container max width">
      <div class="x-column x-sm x-1-3">
        &nbsp;
      </div>
      <div class="x-column x-sm x-1-3">
        &nbsp;
      </div>
      <div class="x-column x-sm x-1-3">
        &nbsp;
      </div>
    </div>
  </div>
</div>

Now I suggest that you check the Essential Grids if you want to have a masonry layout. Here is the documentation of the plugin.

Also, this video may help you as it talks about the Custom Meta Data as the source of the grid which I think is your case:

https://www.youtube.com/watch?v=mkwPrELG7V0

Thank you.

[richardjmanning]

Hello,
Firstly let me thank you for at least attempting to help with this issue.

If I could get the 3 column at least that would be good.

If you would be able to look at this page
http://easyeat.me/recipes/

you will see that for some reason the Meatballs goes under panckaes, I have no idea why.

Does your theme handle columns like bootstrap where I can add as many as I like and it will just put them on a new line if they do not fit, as this is what I have assumed.

thank you again for any help

[christian]

Hey @richardjmanning,

Yes, the theme is based on or similar to Bootstrap. It only includes what is necessary for general page setup though like supporting up to 6 columns only. One of the reasons it does not include or replicate all of Bootstrap is because of performance downsides.

It also currently does not include Flexbox for the Content Builder so you can’t just add as many containers as you like.

With that said, you should use the Essential Grid or The Grid as suggested previously.

Thanks.