Wow ! Looks amazing !

About: DuckDuckGo - Multi-Columns v.18 Good rating
I rarely use duckduck but this style is very useful.
Compact with great detail. Good work decembre ! image
Looks even better than the screenshot with the leftside panel colored.

image
416 x 161 - 9K

Comments

  • That kind to you
    ;-)

    Yes it work fine , but have just a little problem :
    It break the auto loading of more results (we need to click on the "more resuts" button to have them).

    I don't understand why.

    If you have a solution....
  • edited July 2015 Firefox
    ● Remove this line which is causing the autoloading breakage:
    display: inline-flex ! important;

    ● Try another column method:
    .cw #links_wrapper.results-wrapper #links.results/*or some other*/
    {-moz-column-count: 3 !important;}
    and set width
  • edited July 2015 Firefox
    I would also remove the box border around the 'Load more' button. (and add a bit more results box height).
    CHANGE THIS:
    #links .result:not(.result--sep){
    TO THIS:
    #links .result:not(.result--sep):not(.result--more) {

    image



    And if you wanted the 'Load more' button ALWAYS placed at the bottom of the page:
    CHANGE THIS:
    /* (new3) RESULT CONTAINER - PAGE - RESULTS MORE / LINE SEPARATOR */
    .result.result--more {
    display: inline-block;
    height: 100% !important;
    width: 100% ! important;
    min-width: 1900px ! important;
    max-width: 100% ! important;
    min-height: 10px ! important;
    max-height: 10px ! important;
    line-height: 5px ! important;
    margin-right: 4px ! important;
    margin-top: -12px !important;
    bottom: -5px !important;
    outline: 1px solid peru ! important;
    }

    TO THIS:
    /*LOAD BUTTON - AT BOTTOM WIDER*/
    .result.result--more
    {position: absolute !important;
    bottom: 0px!important;
    left: 0px !important;
    width: 50% !important;
    margin-left: 30% !important;
    margin-bottom: -10px!important;}


    image

  • Thanks for your suggestions ...
    I removed the display: inline-flex ! important;
    and use float on left for results item.

    But it was not sufficient.

    Finally, i find where was the problem and use now :
    * /* (new5) INFINITE SCROLL OK - RESULT CONTAINER - PAGE/s - WITH/WITHOUT LINES SEPARATOR - === */ /* #links .results_links_deep */ #links .result:not(.result--sep):not(.result--more) { display: inline-block !important; float: left !important; min-height: 155px ! important; max-height: 155px ! important; min-width: 32.7% ! important; max-width: 32.7% ! important; margin-right: 4px ! important; margin-bottom: 3px !important; padding: 1px 1px 1px 35px ! important; border: 1px solid gray ! important; /* border: 1px solid violet ! important; */ }

    the float: left !important;
    solve the auto-load more results problems !



Sign In or Register to comment.