Hello everyone! I am excited to be diving into the world of html and css, as I have a course lined up for next month. However, I currently have a project that I need to tackle on my own. One issue I'm facing is keeping the products within the screen size. How can I achieve this?
Here is the html code snippet:
<div class="product-container">
<li *ngFor="let product of products">
<div class="product-title">
<h2>
{{product.title}}
</h2>
<div class="product-details">
<img id="productImage" src={{product.imageUrl}}>
<div>
<p>Description:</p>
<p>{{product.description}}</p>
</div>
<div >
<p>Location: <span>Mock Location</span></p>
</div>
</div>
</div>
</li>
</div>
And here is the css styling I have implemented so far:
.product-container {
display: flex;
gap: 90px;
}
.product-container li{
list-style: none;
}
#productImage{
height: 250px;
width: 350px;
}
.special-details{
display: flex;
justify-content: space-between;
font-size: large;
}
.product-title{
text-align: center;
}I admit it does not look great at the moment: https://i.sstatic.net/0VAZJ.png
I would greatly appreciate any advice or help in improving the layout. Thank you!