Tabs CSS snippet fold

Help
1

What I’m trying to do

I am building a book library and I used tabbed callouts CSS snippet and dataview query
Problems I have:

  1. the text in the tab appears folded
  2. the information below the cards appears indented

Things I have tried

I have tried changing the code, tweaked a lot of options in the setting, inserted space between lines etc. but it does not appear properly

image
image951×731 107 KB

instead of

image
image841×672 53.1 KB

I am not so good with programming since I just discovered it. Sorry for the long post. If any other info is needed please tell me.
Thank you

2

If you don’t share the CSS you are using and Dataview query(s) in play, no one can really begin to assist you.

When asking for help, sharing what you have so far in a code block or code blocks is best.

https://help.obsidian.md/Editing+and+formatting/Basic+formatting+syntax#Code+blocks

3

the CCS snippet tab callout is:

[data-callout=“tabbed”] {
outline: 1px solid var(–color-base-30);
border-radius: 0.5rem;
}
[data-callout=“tabbed”] > .callout-content {
padding: 0.25rem;

display: grid;
grid-template-columns: repeat(auto-fill, minmax(5rem, max-content));
gap: 0 1rem;
}
[data-callout=“tabbed”] > .callout-title {
display: none;
}
[data-callout=“tabbed”] > .callout-content p {
margin: 0;
}
[data-callout=“tabbed”] > .callout-content label > input {
display: none;
}
[data-callout=“tabbed”] > .callout-content label {
width: 100%;
display: inline-block;
padding: 0.15rem 0.75ch;
border-radius: 1rem;

color: #ccc;
background-color: #2E7D32;

text-align: center;
font-weight: bold;
font-size: 1.15rem;
cursor: pointer;
}
[data-callout=“tabbed”] > .callout-content label:has(input:checked) {
color: white;
background-color: #8BC34A;
}
[data-callout=“tabbed”] > .callout-content p:not(:has(label input:checked)) + blockquote {
display: none;
}
[data-callout=“tabbed”] > .callout-content > blockquote {
order: 999;
grid-column: 1 / -1;

background-color: transparent;
padding-left: 0;
border: 0;
}

the CCS markup is:

> [!tabbed]
> 
> <label>currently reading<input type="radio" name="test" checked/></label>
> >```dataview
> >TABLE ("![](" + cover + ")") as Cover, author, category FROM "books" WHERE contains(status,"currently reading")
> 
> <label>completed<input type="radio" name="test" /></label>
> >```dataview
> >TABLE ("![](" + cover + ")") as Cover, author, category FROM "books" WHERE contains(status,"completed")
> 
> <label>To read<input type="radio" name="test" /></label>
> >```dataview
> >TABLE ("![](" + cover + ")") as Cover, author, category FROM "books" WHERE contains(status,"unread")

the css snipet cards:
.dashboard {
font-family: inherit;
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;
}

/* Get rid of the parent bullet */
.dashboard div.markdown-preview-section>div>ul>li>.list-bullet {
display: none !important;
}

/* Remove the indentation guide lines */
.dashboard.markdown-rendered.show-indentation-guide li>ul::before,
.dashboard.markdown-rendered.show-indentation-guide li>ol::before {
display: none;
}

div.markdown-preview-section>div>ul.has-list-bullet>li {
padding-left: 0p !important;
}

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

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

/* Dataview support */
.dashboard ul.dataview {
row-gap: 0px !important;
list-style-type: disc !important;
}

I hope this helps