HTML Sample

If I have a row and the content in the left column of that row is deeper than the content in the right column it throws the rest of the page out.

Not quite sure if I understand.

Where can I see this issue live?

You cant see it live because I built is as a private page so that I can find what the problem is.

This is what it looks like when I load that code.

https://www.dropbox.com/s/zayc7kyopzna9yu/PageError.PNG?dl=0"

Unfortunately screenshots don't help for issues like this as I need to inspect the code.

Any chance you can put it live so we can see?

This is the exact code

<h2>This is a H2 Heading</h2>
<div class="grid-50 mobile-grid-100 tablet-grid-100">
Sed posuere placerat fringilla. Pellentesque feugiat, ipsum sed aliquam iaculis, tortor nunc tincidunt ipsum, non condimentum orci velit eget ligula. Sed urna nisl, pharetra a interdum at, tempor et ex. Pellentesque faucibus a tortor a vulputate. Nam tincidunt ultricies enim, quis pretium orci. Etiam imperdiet convallis felis, eget blandit turpis finibus nec. Interdum et
Sed posuere placerat fringilla. Pellentesque feugiat, ipsum sed aliquam iaculis, tortor nunc tincidunt ipsum, non condimentum orci velit eget ligula. Sed urna nisl, pharetra a interdum at, tempor et ex. Pellentesque faucibus a tortor a vulputate. Nam tincidunt ultricies enim, quis pretium orci. Etiam imperdiet convallis felis, eget blandit turpis finibus nec. Interdum et 
</div>

<div class="grid-50 mobile-grid-100 tablet-grid-100 center">
Sed posuere placerat fringilla. Pellentesque feugiat, ipsum sed aliquam iaculis, tortor nunc tincidunt ipsum, non condimentum orci velit eget ligula. Sed urna nisl, pharetra a interdum at, tempor et ex. Pellentesque faucibus a tortor a vulputate. Nam tincidunt ultricies enim, quis pretium orci. Etiam imperdiet convallis felis, eget blandit turpis finibus nec. Interdum et  
</div>

<h3>This is a H3 Heading</h3>
<div class="grid-33 mobile-grid-100 tablet-grid-100">
<ul>
 	<li>This is a list</li>
 	<li>This is a list</li>
 	<li>This is a list</li>
 	<li>This is a list</li>
 	<li>This is a list</li>
  	<li>This is a list</li>
 	<li>This is a list</li>
 	<li>This is a list</li>
</ul>
</div>
<div class="grid-33 mobile-grid-100 tablet-grid-100">
<ul>
 	<li>This is a list</li>
 	<li>This is a list</li>
 	<li>This is a list</li>
 	<li>This is a list</li>
 	<li>This is a list</li>
  	<li>This is a list</li>
 	<li>This is a list</li>
 	<li>This is a list</li>
</ul>
</div>

<div class="grid-33 mobile-grid-100 tablet-grid-100">

Sed posuere placerat fringilla. Pellentesque feugiat, ipsum sed aliquam iaculis, tortor nunc tincidunt ipsum, non condimentum orci velit eget ligula. Sed urna nisl, pharetra a interdum at, tempor et ex. Pellentesque faucibus a tortor a vulputate. Nam tincidunt ultricies enim, quis pretium orci. Etiam imperdiet convallis felis, eget blandit turpis finibus nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque nunc eros, pharetra in 
</div>

<h2>This is a H2 Heading</h2>
<div class="grid-20 mobile-grid-100 tablet-grid-100">
Sed posuere placerat fringilla. Pellentesque feugiat, ipsum sed aliquam iaculis, tortor nunc tincidunt ipsum, non condimentum orci velit eget ligula. Sed urna nisl, pharetra a interdum at,  
</div>
<div class="grid-20 mobile-grid-100 tablet-grid-100">
Sed posuere placerat fringilla. Pellentesque feugiat, ipsum sed aliquam iaculis, tortor nunc tincidunt ipsum, non condimentum orci velit eget ligula. Sed urna nisl, pharetra a interdum at, 
</div>
<div class="grid-20 mobile-grid-100 tablet-grid-100">
Sed posuere placerat fringilla. Pellentesque feugiat, ipsum sed aliquam iaculis, tortor nunc tincidunt ipsum, non condimentum orci velit eget ligula. Sed urna nisl, pharetra a interdum at, 
</div>
<div class="grid-20 mobile-grid-100 tablet-grid-100">
Sed posuere placerat fringilla. Pellentesque feugiat, ipsum sed aliquam iaculis, tortor nunc tincidunt ipsum, non condimentum orci velit eget ligula. Sed urna nisl, pharetra a interdum at, 
</div>
<div class="grid-20 mobile-grid-100 tablet-grid-100">
Sed posuere placerat fringilla. Pellentesque feugiat, ipsum sed aliquam iaculis, tortor nunc tincidunt ipsum, non condimentum orci velit eget ligula. Sed urna nisl, pharetra a interdum at, 
</div>

Any reasons you aren't using Gutenberg columns for this?

To be honest the grid method currently implemented is no longer recommended and will likely be phased out eventually.

You can do the exact same thing (equal width 3/4/5 columns) with Gutenberg columns block and should make your job a lot easier.

I did something really similar with Gutenberg columns for Grill:
https://gpsites.co/grill/?page_id=25

I found the new editor confusing so I kept the old editor. I will have another look

Thanks

It definitely takes a bit to get used it (even for me) but it is a much better method going forward :)

Appreciate your help Leo :-)

What will happen if I turn the classic editor plugin off and use Guttenburg. Will my entire site be a mess?

Whats the recomended format if I want to use "sections" on a page.

What will happen if I turn the classic editor plugin off and use Guttenburg. Will my entire site be a mess?

From my understanding, the same code will show up in an custom HTML block.

Unfortunately it's not possible to use Gutenberg in Sections currently.

We've been working a separate sections block plugin that will make this possible.

For now I would highly recommend trying GhostKit: https://wordpress.org/plugins/ghostkit/

We really like what they are doing :)

Ok so what is the correct way to add code to the "sections" area?

Is it ok to use unsemantic or is there a recomended way?

Is this ok?

<div class="grid-65 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>
<div class="grid-35 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>

<div class="grid-50 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>
<div class="grid-50 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>

Also will it be a problem if I leave the existing coding on my other pages as it is for now with a grid container surrounding each row? I can then rebuild each page when I have time. Is there a problem with it being coded like that or is it just not the recommended way?

Im talking about this way. All of my pages are currently coded like this

<div class="grid-container">
<div class="grid-65 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>
<div class="grid-35 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>
</div>

<div class="grid-container">
<div class="grid-50 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>
<div class="grid-50 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>
</div>

You shouldn't need the grid-container class in sections. Using the contained layouts automatically does it for you.

Other than that it looks ok.

I would still recommend trying a plugin like GhostKit.

Sections will be phased out eventually with the emergence of Gutenberg.

Ok I took your advice and switched back to Gutenberg. Second time around it wasnt so bad and I have now built an entire page.

Sections will be phased out eventually with the emergence of Gutenberg.

Oh No! I love the "Sections" area. I like how it allows me to do a full width row with a colored background. Can I do that in Gutenberg?

As mentioned before, we've been working a separate sections block plugin that will make all of the original section option possible plus more with Gutenberg.

If you want to do full-width row now, I would recommend GhostKit.

I'm glad that you suggested that I ditch the classic editor and move to Gutengerg. It seems quite good the second time around. Cant wait to see your new sections plugin. The existing Sections area is already really good so a combination of Gutenberg and Sections will be perfect. If I have already built several pages using the existing Sections area, will they all need to be rebuilt when the new plugin comes out?

Ive installed the Ghost Kit. My only reservations with it and anything related to page content is how much code bloat they produce, how much they slow the page down and most of all, there effect on your SEO.