Browse column responsive card display

[nc07]

Another question,
Is there anyway to achieve this js code

Code: Select all

     $("[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.

[kev1n]

Try using !important

Code: Select all

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

[nc07]

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;
    }

}

[kev1n]

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