New to CSS+HTML and trying to practice my 'skills' which I have developed so far.
I've spent so many hours trying to get the text to align but it just will not.
Here's what i've had achieved so far
That in itself took ages just to figure out how to align the four cards like that. I still cannot figure out how to align this text though.
Here is my HTML:
<body>
<div class="burger-layout">
<div class="burger-item">
<h2>HFC Classic</h2>
<span class="burger-description">RSPCA Approved chicken, cooked in extra virgin olive oil with dill pickles,
cos lettuce & egg mayo.</span>
<ul>
<li class="kj">2800Kj</li>
<li class="price">$14.50</li>
<li class="Details">More Details</li>
</ul>
<img src="hfc.png" alt="" class="burgerimg">
</div>
<div class="burger-item">
<h2>HFC Hot</h2>
<span class="burger-description">RSPCA Approved chicken, cooked
in extra virgin olive oil with our Hawthorn
Hot Sauce, jalapeños, slaw, shredded carrot, Spanish onion & egg mayo.</span>
<ul class="burgerfooter">
<li class="kj">2910Kj</li>
<li class="price">$15.90</li>
<li class="Details">More Details</li>
</ul>
<img src="hot.png" alt="" class="burgerimg">
</div>
<div class="burger-item">
<h2>HFC Smokey</h2>
<span class="burger-description">RSPCA Approved chicken, cooked in extra virgin olive oil with chipotle
mayo, dill pickles, slaw & Spanish onion.</span>
<ul>
<li class="kj">2700Kj</li>
<li class="price">$15.50</li>
<li class="Details">More Details</li>
</ul>
<img src="smokey.png" alt="" class="burgerimg">
</div>
<div class="burger-item">
<h2>HFC Blat</h2>
<span class="burger-description">RSPCA Approved chicken, cooked in extra virgin olive oil with crispy bacon,
avocado, cos lettuce, tomato & herbed mayo.</span>
<ul>
<li class="kj">2600Kj</li>
<li class="price">$15.90</li>
<li class="Details">More Details</li>
</ul>
<img src="blat.png" alt="" class="burgerimg">
</div>
</div>
Here is my CSS so far: (note: I know the indentation is off here, its correct in my IDE)
body {
display: flex;
justify-content: center;
align-items: center;
min-width: 10vh;
}
.burger-layout{
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 10px;
row-gap: 10px;
}
.burger-item {
border: 1px grey solid;
border-radius: 10px;
max-width: 537px;
max-height: 210px;
}
.burgerimg {
display: flex;
display: inline-block;
max-width: 100px;
max-height: 100px;
padding: 10px 10px;
}
.burger-description {
}