- This topic has 40 replies, 3 voices, and was last updated 4 years, 8 months ago by Leo.
-
AuthorPosts
-
July 16, 2019 at 8:37 am #959331LeoStaffCustomer Support
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?
July 16, 2019 at 1:00 pm #959616AlanYou 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″
July 16, 2019 at 1:02 pm #959621LeoStaffCustomer SupportUnfortunately 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?
July 16, 2019 at 1:21 pm #959634AlanThis 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>
July 16, 2019 at 1:36 pm #959647LeoStaffCustomer SupportAny 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=25July 16, 2019 at 1:40 pm #959649AlanI found the new editor confusing so I kept the old editor. I will have another look
Thanks
July 16, 2019 at 1:41 pm #959651LeoStaffCustomer SupportIt definitely takes a bit to get used it (even for me) but it is a much better method going forward π
July 16, 2019 at 1:44 pm #959652AlanAppreciate your help Leo π
July 16, 2019 at 1:47 pm #959656AlanWhat 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.
July 16, 2019 at 3:49 pm #959726LeoStaffCustomer SupportWhat 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 π
July 16, 2019 at 4:28 pm #959749AlanOk 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>
July 16, 2019 at 7:14 pm #959816LeoStaffCustomer SupportYou 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.
July 16, 2019 at 9:32 pm #959873AlanOk 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?
July 17, 2019 at 8:55 am #960335LeoStaffCustomer SupportAs 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.
July 17, 2019 at 1:39 pm #960591AlanI’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.
-
AuthorPosts
- You must be logged in to reply to this topic.