nuBuilder Forum

Posted: **Tue Feb 22, 2022 9:27 am**

Another question,
Is there anyway to achieve this js code

     $("[data-nu-row]").css({
        'display': 'block', 'position': 'sticky', 'width': '90vw', 'text-align': 'right', 'float': 'left', 'font-size': '150px', 'transition': '0.10s'
    });

with CSS only. The display and positions are not respected via CSS only. If this is possible then it will solve all the issues of current flaws and will give way for other responsive options.

Posted: **Tue Feb 22, 2022 9:33 am**

Try using !important

Code: Select all

div[data-nu-row] {
    display: block !important;
  // .... etc....
}

Posted: **Wed Feb 23, 2022 3:31 am**

Thanks, Kevin, finally it's working with CSS only also optimised a litttle for mobile view.

CPT2202231432-1108x939.png

Code: Select all

@media screen and   (max-width: 768px) {
    

    div[data-title]:before {
        content: attr(data-title);
        float: left;
        text-transform: uppercase;
        font-weight: bold;
        display: block;

    }

    div[data-nu-row] {
        display: block !important;
        position: sticky !important;
        width: 90vw !important;
        text-align: right !important;
        float: left;
        border: none;
        transition: 0.10s
    }

    div[data-nu-column ="0"] {
        margin-top: 20px;
        border: none;
        box-shadow: 0 0 20 rgba(0, 0, 0, 5);
        border-radius: 5px 5px 0 0;
    }

    .nuBrowseFooter {
        position: sticky!important;
        bottom: 45px !important;
        width: 90vw !important;
        font-size: 35px;
        float: left;
        transition: 0.10s;
        z-index: 99;
    }

    .browsePage {
        font-size: 35px;

    }
    #nuLast, #nuNext {
        font-size: 55px;

    }
    .nuPaginationInfo {

        display: none;
    }

    .nuBrowseTitle {
        display: none
    }


    .nuCellOdd {
        background-color: #dae0f5;
        border: none;
        border-radius: 0;
        /*border-style:solid;*/
        /*border-width:1px 0 0;*/
        padding: 3px 10px
    }
    .nuCellEven {
        background-color: #dae0f5;
        border: none;
        border-radius: 0;
        padding: 3px 10px
    }

    .nuBrowseBorderTop {
        border-top: none!important;
        box-shadow: 0 0 20 rgba(0, 0, 0, 5);


    }
    .nuBrowseBorderBottom {
        border-bottom: none!important;
        box-shadow: 0 0 20 rgba(0, 0, 0, 5);


    }

    #nuActionHolder {
        white-space: nowrap;

        display: flex;
    }
    #nubody {
        height: 90vh!important;
        width: 100vw!important;
    }

}

Posted: **Wed Feb 23, 2022 7:03 am**

Thanks, I'll try it out later.
It would be nice if others could also try it out or at least leave a comment here

nuBuilder Forum

Browse column responsive card display

Re: Browse column responsive card display

Re: Browse column responsive card display

Re: Browse column responsive card display

Re: Browse column responsive card display