I want to remove space between "inner_card" and "my-card-child". I tried it with margin and padding between those card and div tag. but i'm not getting solution for this.
I wan to expand that contact card to the border top, right and left can anyone help me to find the solution.
<template>
<lightning-card class="my-card">
<article class="slds-card">
<template if:true={contacts.data}>
<template for:each={contacts.data} for:item="con">
<div class="my-card-child" key={con.id} onclick={navigateToNewContactPage} data-id={con.Id} >
<lightning-card>
<lightning-card class="inner_card" title="Contact" icon-name="standard:account">
</lightning-card>
<a href="#"> <h3>{con.Name}</h3> </a> <br>
Title: {con.Title}<br>
Phone: {con.Phone} <br>
Email: {con.Email}
</lightning-card>
</div>
</template>
</template>
<template if:true={contacts.error}>
<p>{contacts.error}</p>
</template>
</article>
</lightning-card>
</template>
CSS:
.my-card {
border: 2px solid #ccc;
border-radius: 25px;
padding: 20px;
display: flex;
}
.my-card-child {
border: 2px solid #ccc;
border-radius: 10px;
padding: 10px;
margin: 12px;
display: flex;
float: left;
}
.inner_card {
--sds-c-card-color-background: #a2a8e2;
}
I want to remove space between lightning-card and border
- what do you mean, its hard to visualize from where you want to get rid of space, I seemy-card-child
has some padding and margin.