Despite my efforts, I couldn't locate a question quite similar to mine. If an answer already exists somewhere, I apologize.
I'm trying to create a simple flex layout in row format where 2 containers are placed side by side. Inside another component, I have a card component with an ngFor loop. Below is the code snippet:
top-cta-HTML:
<section id="cta-container">
<h1>Take Control of Your Financial Future</h1>
<h4>
Whether you’re considering annuities for future income security, saving
for a big life change, or selling your structured settlement,
we're here to provide guidance, advice, and expertise.
</h4>
<app-cta-card></app-cta-card>
</section>
top-cta-CSS:
#cta-container {
margin: 2.5rem 0 0 auto;
padding: 0 20px 0 5px;
background-color: orange;
width: 35%;
border-bottom-left-radius: 60px;
text-align: end;
}
#cta-container h1 {
font-size: 2.75rem;
font-weight: 900;
}
#cta-container h4 {
margin-top: -20px;
font-size: 1.2rem;
font-weight: 500;
line-height: 1.5em;
}
card-HTML:
<article id="card-parent-container">
<div class="top-cta-card" *ngFor="let card of ctaCards">
<div class="cta-card-topper">1</div>
<h3>{{ card.title }}</h3>
<a href="#" class="top-cta-links">➔</a>
<p>{{ card.description }}</p>
</div>
</article>
card-CSS:
.top-cta-card {
background-color: var(--cream);
width: 300px;
}
#card-parent-container {
display: flex;
flex-direction: column;
}
.cta-card-topper {
background-color: var(--teal);
height: 100%;
width: 100%;
color: var(--teal);
}
.top-cta-links {
background-color: var(--teal);
color: var(--cream);
padding: 5px 6px;
border-radius: 50%;
box-shadow: 3px 2px 3px var(--gunMetal50);
}
This code results in 2 stacked cards instead of the desired side-by-side layout, no matter what adjustments I make.
To test this issue, I created 2 divs inside the top-cta-HTML file without using an ngFor loop and achieved the desired outcome. Any insights on where I might be going wrong would be greatly appreciated.
Thank you in advance for any assistance provided!