Graphic issue with my "start-menu" after updating to Obsidian 1.6

[glvercellone]

Hello everyone,
after the latest update to Obsidian 1.6, I’ve noticed some strange behavior in my vault from a graphical standpoint. Let me explain: in my main menu, I used the list-cards function, which allows for a color change effect when the mouse hovers over an item. Additionally, using cards-list (CSS) , the side dots (typical of lists) were hidden.
Now, these dots appear and I can’t seem to get rid of them.

Can anyone help me out?

Menu before the Update :

Menu after the update a the version Obsidian 1.6

This is my CSS list-cards:

CSS list-cards1

.list-cards1 {
–list-cards1-template: repeat(1, minmax(0, 1fr));
}

.list-cards1 div > ul {
–link-color: var(–text-normal);
–link-unresolved-color: var(–text-muted);
–link-decoration: none;
–link-decoration-hover: none;
–link-external-color: var(–text-normal);
–link-external-decoration: none;
–link-external-decoration-hover: none;
display: grid;
gap: 5px;
grid-template-columns: var(–list-cards-template);
padding: 0;
list-style-type: none !important;
}

.list-cards1 div > ul > li {
display: flex;
border-radius: 8px;
border: 1.5px solid #b3b3b3;
flex-wrap: wrap;
min-width: 20px; /* set the minimum width here /
max-width: 240px; / set the maximum width here /
max-height: 48px; / set the maximum width here */
}

.list-cards1 div > ul > li a {
flex-grow: 0;
}

.list-cards1 div > ul > li a:after {
content: “”;
flex-basis: 100%;
Height:100 ;
}

.list-cards1 div ul > li a {
flex-grow: 1;
padding: 4px;
font-weight: var(–font-semibold);
background: none;
}

.list-cards1 div ul > li:hover {
border: 1px solid #fb464c;
background: #dadada;
}

.theme-dark .list-cards1 div ul > li {
background-color: var(–background-secondary);
}

.list-cards1 div ul ul {
display: block;
width: 100%;
color: var(–text-muted);
font-size: var(–font-smaller);
margin-top: -16px;
padding: 0 8px 8px;
}

.list-cards1 div ul ul > li {
display: block;
}

@media screen and (max-width: 750px) {
.list-cards1.list-cards-mobile-full {
–list-cards1-template: repeat(1, minmax(0, 1fr));
}
}

Thankyo for your support.

[ariehen]

Can you share an example of the Markdown (or the entire note) creating the start-menu there?

It will be easier for folks to have a look at what’s going on if both the source and CSS is available.

[glvercellone]

Hello Ariehen, thanks for your quick answer!

Below my start menu :

 ---
prefer-view: edit-source
Revisione: 000.010 (del 2023.10.29)
cssclasses:
  - proprietà
  - customname
  - list-cards1
banner: "004-Varie/Immagini/Immagini_Sfondi/Banner0.svg"
banner_y: 0
banner_x: 0.41251
totale: "0"
progress: 0
turnover: 0
s_ammount: 0
---

> [!multi-column]
> 
> > [!blank-container|right|wide-1]
> > ![[Search.svg|250]] 
> 
> > [!blank-container|left|wide-5]
> > ```search-bar
> > only search bar
> > ```

</br></br>

> [!multi-column]
> 
> > [!blank]
> > &nbsp;![[001 - LOGO - CRM - N.svg|220]]
>
> > [!blank]
> > &nbsp;![[002 - LOGO - PMA  - N.svg|220]]
>
> > [!blank]
> > &nbsp;![[003 - LOGO - ATFC .svg|220]]

> [!multi-column]
> 
> > [!blank|center]
> > 
> > - &nbsp;[![[001a- CRM - N - Agenda.svg|220]]](inPRM.md)
> > - &nbsp;[![[001a- CRM - N- Agenda1.svg|220]]](esTOTAL.md)  
> > - &nbsp;[![[001a- CRM - N - Customer.svg|220]]](000-List-Customer)  
> > - &nbsp;[![[001a- CRM - N - Meeting.svg|220]]](mnTotal.md)   
> > - &nbsp;[![[001a- CRM - N - Offer.svg|220]]](ofTOTAL.md)  
> > - &nbsp;[![[001a- CRM - N - Nomination.svg|220]]](NOMI_total.md)  
>   
> > [!blank|center]
> > 
> > - &nbsp;[![[002a - PMA- N - Market.svg|220]]](000-Analisi_Mercato)  
> > - &nbsp;[![[002a - PMA- N - Special.svg|220]]](000-Special_Project.md)
> > - &nbsp;[![[002a - PMA- N - BSP.svg|220]]](000-BSP)  
> > - &nbsp;[![[002a - PMA- N - Product.svg|220]]](001-XXX_PRM/Prodotti/prTOTAL.md) 
> > - &nbsp;[![[001a- CRM - N - Claim.svg|220]]](000-List-Claims.md)   
> > - &nbsp;[![[002a - PMA- N - Reports.svg|220]]](000-Report)  
>   
> >[!blank|center]
> >
> > - &nbsp;[![[003a - PFA - N - Feasability.svg|220]]](FS-open.md)  
> > - &nbsp;[![[003a - PFA - N - Project.svg|220]]](ATFC_Total.md)  
> > - &nbsp;[![[003a - PFA - N - Proto.svg|220]]](EP-offer.md)  
> > - &nbsp;[![[004a - PFA - N - Tooling.svg|220]]](ET-total)  
> > - &nbsp;[![[005a - PFA - N - Testing.svg|220]]](TE_list)  
> > - &nbsp;[![[004a - PFA - N - Dashboard.svg|220]]](dashboard.md)

And this is the picture how it appears on the screen :

[ariehen]

Great. The source is important.

I’m on mobile now, so can’t check, but is the [!multi-column] coming from efemkay’s MCL snippet? That’s important to know as well. Also the theme you are using and any other snippets, etc.

[glvercellone]

Hello Ariehen,
below the single Answer :
I Have deactivated all the CSS in the and active only 3 :

1. Customname is CSS to increase the screen dimension of my note :

#CSS custom name
* for editing view */
.customname-home.markdown-source-view.mod-cm6.is-readable-line-width:not(.is-rtl) .cm-contentContainer,
.customname-home.markdown-source-view.mod-cm6.is-line-wrap.is-readable-line-width .cm-content,
.customname-home.markdown-source-view.mod-cm6.is-line-wrap.is-readable-line-width .cm-line:not(.HyperMD-table-row) { max-width: 950px; }

/* for reading view */
.customname-home.markdown-preview-view.is-readable-line-width .markdown-preview-sizer { max-width: 950px; }

2. MULTICOLUMN
   This CSS is very complex, but it has always been active, even before the UPGRADE to OBSIDIAN 1.6. If I deactivate it, the multi-column no longer appears, but the dots on the lists remain as you can see below.
   

   

3. Finally, the CSS list-cards is the one that should allow me to remove the dots from the list.

Regarding the style, I use the AnupPuccin theme, but even using the default one and keeping the three previous properties active, this is the result (nothing changes), the dots remain:

Another important piece of information, the bullet points only appear when we switch from edit-preview mode to view!
Edit-Preview (NO POINT):

In VIEW Mode, the bullet points appear:

Thankyou for support.

[ariehen]

Thanks for the detailed info. It was easy to setup and have a look at.

I don’t know the reason for the change as I don’t use the cards CSS, but you could try adding this to your list-cards1 file. I just added it at the bottom. It seems to do the trick without any unnecessary shifting of the cards with removing the bullet.

.list-cards1 .list-bullet {
    display: none;
}

[glvercellone]

Thank you, now it’s working perfectly! This is the result on the screen in display mode!