[Support request] Suggestion: Add some CSS to the columns

Home Forums Support Suggestion: Add some CSS to the columns

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1231709
    webintas

    Hi there,

    There is a problem with the columns here: https://docs.generatepress.com/article/creating-columns/ when the row above is not filled 100%. I would suggest considering adding the CSS below or something like that.

    .first-column{
    clear:left;
    }

    .last-column{
    clear:right;
    }

    #1231998
    Tom
    Lead Developer
    Lead Developer

    Our float system is in desperate need of an update. Flexbox is the way to go when it comes to columns.

    If you’re using the block editor, definitely check out our plugin: https://generateblocks.com

    The grid system is super powerful 🙂

    #1435670
    webintas

    Any update on the CSS rework/update?

    #1435756
    Elvin
    Customer Support

    Hi,

    We recently released an alpha version.
    https://generatepress.com/generatepress-3-0-a-new-era/

    We’ve finally added Flexbox Grid. You can try and see if it fits to your liking.

    Let us know if it works for you.

    A wise man once said:
    "Have you cleared your cache?"

    #1436129
    webintas

    Awesome! I will try to put it on out staging site.

    #1437119
    Elvin
    Customer Support

    Great.

    Hope you enjoy using the new version. 🙂

    A wise man once said:
    "Have you cleared your cache?"

    #1437228
    webintas

    I do! It looks good 🙂

    Are the CSS classes in the doc still the same? https://docs.generatepress.com/article/creating-columns/

    #1437264
    Elvin
    Customer Support

    That part of the doc has some old info, with some being deprecated(Lightweight Grid Columns).

    We highly recommend using Generate Blocks. It’s pretty much Lightweight Grid Columns’ successor.
    https://generateblocks.com/

    GenerateBlocks is new and actively supported/development by Tom.

    It has a lot of styling features plus you can add CSS classes if you wish to apply custom CSS to it. GenerateBlocks is 100000x better. You should try it.:)

    A wise man once said:
    "Have you cleared your cache?"

    #1437543
    webintas

    I use another pagebuilder so I would prefer not using Generate Blocks.

    There must be some classes for columns?

    #1437850
    David
    Staff
    Customer Support

    Hi there,

    are you using a Pagebuilder for the columns ?

    #1437871
    webintas

    No, I am using Elementor for generel page building in WordPress.

    But I do have some custom content from code in functions.php which I want to have in columns. I do not want to write extra CSS for that because I thought it was included in the theme if I just use the right CSS classes.

    Does that makes sense?

    #1437917
    David
    Staff
    Customer Support

    The older ( pre-3.0 ) theme, and the current 3.0 alpha release when set to Floats uses the Unsemantic grid. So you can use the classes provided here:

    https://unsemantic.com

    Personally i feel its easier to write a little of your flexbox CSS to provide that function – as this doesn’t require a whole CSS grid library to be installed.

    If you want – we can help with the CSS.

    #1437966
    webintas

    But what about when using Flexbox and not Floats. What is the CSS class’ then?

    #1438048
    David
    Staff
    Customer Support

    There are no classes when using Flexbox.
    It simple applies the necessary Flex CSS to each of the theme elements.

    You could create your own with something as simple as this CSS:

    @media(min-width: 769px) {
        .flex-row {
            display: flex;
            flex-wrap: wrap;
        }
        /* 3 column grid */
        .flex-item-33 {
            margin: 0 10px 10px 0;
            flex: 1 0 calc(33% - 10px);
        }
        /* 4 column grid */
        .flex-item-25 {
            margin: 0 10px 10px 0;
            flex: 1 0 calc(25% - 10px);
        }
    }

    And your HTML would be like this:

    <div class="flex-row">
        <div class="flex-item-33">
            I am a flex item
        </div>
        <div class="flex-item-33">
            I am a flex item
        </div>
        <div class="flex-item-33">
            I am a flex item
        </div>
    </div>
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.