Viewing 9 replies - 1 through 9 (of 9 total)
  • I’m the author of PixGridder, however if you provided a demo link maybe I could help you too

    Manuel ??

    Thread Starter Zee

    (@gphx)

    Hi Manuel,

    Huge fan of PixGridder so thank you, and thanks for extending your help!

    Here’s the link (see grey boxes at the bottom):
    *link removed*

    In this case thank you.

    A CSS solution for your particular case only (it means considering the background color of the boxes, their margin and their border radius) is this:

    assign to the row that contains the boxes the class equal-height, then in the stylesheet of the theme (or by using the tool you prefer) add this style:

    .row.equal-height {
        position: relative;
    }
    .row.equal-height .column {
        position: static;
    }
    .row.equal-height .column::after {
        background: #303030;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        bottom: 1em;
        content: '';
        position: absolute;
        top: 1em;
        width: inherit;
        z-index: -1;
    }
    

    Let me know. Manuel ??

    Thread Starter Zee

    (@gphx)

    Thanks Manuel. I’m having trouble assigning a class to the row within the content, it’s six PixGridder columns – any help would be great.

    To assign a class to the row just use the PixGridder-UI: https://www.diigo.com/item/p/cebrobqzcbodoqdqozbdscdrce

    Let me know. Manuel ??

    Thread Starter Zee

    (@gphx)

    Thanks Manuel, you’re a genius – PixGridder is amazing!

    That works and also looks great in responsive mode ?? Is there a way to separate the boxes when responsive, as they merge together?

    Here’s the link: https://192.185.4.35/~gphxcouk/CL_sancodl/wordpress/

    mmmm… try to replace the code I provided with:

    @media (min-width: 769px) {
    .row.equal-height {
        position: relative;
    }
    .row.equal-height .column {
        position: static;
    }
    .row.equal-height .column::after {
        background: #303030;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        bottom: 1em;
        content: '';
        position: absolute;
        top: 1em;
        width: inherit;
        z-index: -1;
    }
    }
    

    Can’t test it, so please let me know. Manuel ??

    Thread Starter Zee

    (@gphx)

    Perfect! The boxes are now separated on mobile devices ?? Thanks Manuel, you’re a star!

    Plugin Author jp2112

    (@jp2112)

    Thank you Manuel.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Equal heights?’ is closed to new replies.