@TH3RIV
Posted
Hey, this seems like a decent start, but to address your small price vertical centering issue, you can just add align-items: center for the class="prices" div.
Now regarding your headings... No need to use multiple headings, just use one and play with font size, margins/padding to get it aligned as close to the design as possible.
Here's a link to my solution if you would like to check the code out.
Hope this helps.
@KIvanovvv
Posted
@TH3RIV Thank you for your time to review my code! I am taking note for the heading, because I realized that it unnecessary complicated my code. I guess, I wasn't sure what I was doing :D. However about the small price centering issue, I did try your solution, but it did not do anything . Is it possible that the different displays of the elements conflict with each other and some how messed it up?
@TH3RIV
Posted
@KIvanovvv | You also have a <h3> element without having a <h2> element. It doesn't break the code but is a bad practice. There's only one heading in that page. Perfume to me seems just like a paragraph with letter spacing and different font size.
As for the centering, did you define the display property in the prices container? align-items is a flexbox property, so you have to define the display I believe for that container.
I have mine set as an unordered list rather than paragraphs though.
ul,
li {
display: inline;
align-items: center;
list-style: none;
margin-right: 20px;
}
.prices {
display: flex;
justify-content: flex-start;
padding: 0 0 0 20px;
margin: 0;
}
Marked as helpful
@KIvanovvv
Posted
@TH3RIV Yes It finally worked as intended , the problem was that I hadn't add the display:flex in the div.prices and so the align-items didn't worked. I will re-upload the fixed solution. Thank you for the tips and time spent !
