[Support request] Old column markup inside page content not working anymore ?

Home Forums Support [Support request] Old column markup inside page content not working anymore ?

Home Forums Support Old column markup inside page content not working anymore ?

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1825122
    Benjamin

    Hello,

    In the past I could use this markup to create columns directly inside my post HTML content:

    
    <div class="grid-container grid-parent">
    <div class="grid-33 tablet-grid-33 mobile-grid-100 first-column">
        First column content
    </div>
    <div class="grid-33 tablet-grid-33 mobile-grid-100 second-column">
        Second column content 
    </div>
    <div class="grid-33 tablet-grid-33 mobile-grid-100 third-column">
        Third column content
    </div>
    </div>
    
    <div class="grid-container grid-parent">
          <div class="grid-50 tablet-grid-50 mobile-grid-100">
                First column
          </div>
          <div class="grid-50 tablet-grid-50 mobile-grid-100">
                Second column
          </div>
    </div>
    

    Now it doesn’t work anymore… has anything changed recently ?

    Thanks

    #1825215
    Benjamin

    OK so I found that it was because of the new flexbox layout.

    Assuming I want to use the new layout but STILL want to be able to add 2 columns or 3 columns in my post content : did you create utility classes for this ??

    Because I found an old post saying we would need to code them ourself (but I would find that quite ridiculous).

    Based on this old post I would expect GP to have some replacement for the old CSS column classes, e.g. that these flex-33-item, flex-50-item classes (you get the idea):

    
    <div class="flex-container">
        <div class="flex-33-item">
    
        </div>
    
        <div class="flex-33-item">
    
        </div>
    
        <div class="flex-33-item">
    
        </div>
    </div>
    
    <div class="flex-container">
        <div class="flex-50-item">
    
        </div>
    
        <div class="flex-50-item">
    
        </div>
        
    </div>
    

    …would pretty much work out of the box without me having to write all media queries CSS.

    Has it been added to the new layout version ? If so, where is the page explaining the new way to create columns inside content ?

    Thanks,

    #1825670
    Leo
    Staff
    Customer Support

    Hi there,

    Based on this old post I would expect GP to have some replacement for the old CSS column classes, e.g. that these flex-33-item, flex-50-item classes (you get the idea):

    The benefit of using Flexbox is that those baked-in classes and CSS are no longer required which gives the theme a huge performance boost.

    Have you tried the block editor with GenerateBlocks? That’s definitely the best solution now:
    https://docs.generateblocks.com/article/grid-overview/
    https://docs.generateblocks.com/article/container-overview/#layout-%E2%80%93-grid-item

    If not you will just need to write your own HTML and CSS with Flexbox from scratch:
    https://dev.to/drews256/ridiculously-easy-row-and-column-layouts-with-flexbox-1k01

    GB is definitely the way to go as there would be no coding required at all 🙂

    #1826127
    Benjamin

    For once I have to totally disagree with the move made by Tom.

    Please ask to Tom to have a look at this thread, I hope he’ll consider adding these classes so we can create clean columns directly from the HTML editor without having to add any CSS.

    I really don’t see why the equivalent of the grid-33, grid-50 hasn’t been coded in the core of GP.

    Basically the new layout isn’t really backward compatible… because NO, pushing to use Gutenberg is for me really not the way to go : you end up with some really crappy markup (div inside div inside div inside div inside div…) that cannot be compared with the really clean way we had to create columns inside the content from the HTML editor.

    I really hope Tom will reconsider his position on this.

    #1827158
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    This move was made to remove CSS from the theme that isn’t needed by everybody. Most people don’t need utility classes to write custom HTML – they use page builders or Gutenberg, so there’s no need to add that extra weight to the theme.

    For the people that want to write custom HTML columns, it’s incredibly easy to include their own utility classes or preferred framework in their child theme.

    The move to flexbox made it so GP loads very little “extra” CSS that isn’t 100% necessary. It’s definitely not something we’ll be adding back.

    pushing to use Gutenberg is for me really not the way to go : you end up with some really crappy markup (div inside div inside div inside div inside div…) that cannot be compared with the really clean way we had to create columns inside the content from the HTML editor.

    Have to disagree here. We built the Grid block in GenerateBlocks to output HTML and CSS exactly how we would write it using basic HTML. No extra divs, no unnecessary CSS. It’s definitely worth a look.

    Let me know if you have any questions 🙂

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.