Design comparison
Solution retrospective
I had an issue creating the spacing between the sale/full prices and the cart icon/button text. I tried adding a right-margin using the following pseudo-elements:
<div class="prices">
<p>
<span class="sale-price">$149.99</span>
<span class="full-price">$169.99</span>
</p>
</div>
.sale-price::after {
margin-right: 20px;
}
The only fix I could come up with was to add multiple non-breaking spaces to my html file. The pseudo-elements work fine if I add content, just not with adding margins or padding.
Googling came up with the solution to apply display:block to the parent element. I tried adding this to all classes for container elements all the way up to, but not including, main but this made no difference.
Any help on resolving this issue would be greatly appreciated as I'm not happy with using non-breaking spaces and it bothers me that I don't understand why the pseudo-elements are behaving this way.
Community feedback
- @younesadjoudjPosted about 1 year ago
@BekstersLab Hi! Very nice work. For the spacing between sale/full prices, try a display: flex on the parent element, and add a gap css property (for exemple: gap: 2rem;). And don't forget to align the items on the secondary axis so that the full price is positioned in the middele.
.prices p { display: flex; align-items: center; gap: 2rem; }
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord