Dashboard++ — a simple organization and navigation method for Obsidian Vaults

I have created hompage following the steps. I am not able to see my topics shown in different columns. I see many posts here did not face this issue, I guess it might be my css problem? I copy my note as below, appreciate anyone can advise what did I done wrong. I am using minimal theme also.


cssclass: dashboard, max
banner: “https://images.unsplash.com/photo-1461173890990-f128607276ff?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80
banner_x: 0.5
banner_y: 0.479

ABC

  • One
  • Two
  • Three

Vault Info

  • :file_cabinet: Recent file updates
    $=dv.list(dv.pages('').sort(f=>f.file.mtime.ts,"desc").limit(4).file.link)

  • :bookmark: Tagged: favorite
    $=dv.list(dv.pages('#favorite').sort(f=>f.file.name,"desc").limit(4).file.link)

  • :part_alternation_mark: Stats

    • File Count: $=dv.pages().length
    • Personal recipes: $=dv.pages('"Family/Recipes"').length

css code as below (same as copy from GitHub):
/* Updated 2022-02-28 */

.dashboard {
padding-left: 25px !important;
padding-right: 25px !important;
padding-top: 20px !important;
}

.dashboard .markdown-preview-section {
max-width: 100%;
}

/* Title at top of the document */
.dashboard .markdown-preview-section .title {
top: 60px;
position: absolute;
font-size: 26pt !important;
font-weight: bolder;
letter-spacing: 8px;
}

.dashboard h1 {
border-bottom-style: dotted !important;
border-width: 1px !important;
padding-bottom: 3px !important;
}

.dashboard div > ul {
list-style: none;
display: flex;
column-gap: 50px;
row-gap: 30px;
flex-flow: row wrap;
}

.dashboard div > ul > li {
min-width: 250px;
width: 15%;
}