efemkay / obsidian-modular-css-layout

CSS Layout hack for Obsidian.md
https://efemkay.github.io/obsidian-modular-css-layout/
GNU General Public License v3.0
999 stars 74 forks source link

MCL Gallery Cards not working with Minimal theme > 7.6.8 #101

Open chrsdk opened 2 months ago

chrsdk commented 2 months ago

Recent versions of Minimal theme cause image grids, created with

> [!blank-container|no-margin gallery] Title
>
> ![[path/to/pic1.jpg]]
> ![[path/to/pic2.jpg]]
>
> ![[path/to/pic3.png]]
> ![[path/to/pic4.png]]
> ![[path/to/pic5.png]]

to no longer fit on the line. Images have different heights and the image grid is cut off on the right edge of the screen.

The problem is not present with either the default theme or Minimal theme version 7.6.8.

efemkay commented 1 month ago

i cannot replicate your issue for now. here's screenshot on the markdown (as per snippet down below) of both using latest Minimal theme and default theme. the images are from unsplash.

image

> [!blank-container|no-margin gallery] Langkawi, Malaysia
>
> ![[ryaneof-Jh_Xk8RQtG0-unsplash.jpg]]
> ![[manish-tulaskar-o0TRwfgXhdw-unsplash.jpg]]
> 
> ![[izuddin-helmi-adnan-dIArrAUjQV0-unsplash.jpg]]
> ![[jay-tun-0dF2fJjTHCw-unsplash.jpg]]
> ![[ramzi-bezzoudji-WeiERYmWIT4-unsplash.jpg]]

perhaps you can share more details on how the problem looks like on your end

chrsdk commented 2 weeks ago

I've updated obsidian and minimal theme to the latest version and created a blank note with 4 pictures from unsplash just like you did.

> [!blank-container|no-margin gallery] Title
> ![[photo-1700830960459-90d4dd355b7b.jpeg]]
> ![[photo-1729016258424-317d0f05aa28.jpeg]]
> ![[photo-1728755696561-f8fd6ff03630.jpeg]]
> ![[photo-1727949649305-45f2ec799bd8.jpeg]]

This is how it looks in minimal theme:

Screenshot_20241017_084934_Obsidian.jpg

and this is how it looks in the default theme:

Screenshot_20241017_090315_Obsidian.jpg

As you can see, in minimal the images are displayed side by side running off the screen, while in the default theme they are displayed correctly.