@Satyaaam
Submitted
My flex box is not working properly . I did display:flex; justify-content:center ; align-items:center; but it didn't work , align-items:center is not working . So i used padding in body tag.
@Kyr27
@Satyaaam
Submitted
My flex box is not working properly . I did display:flex; justify-content:center ; align-items:center; but it didn't work , align-items:center is not working . So i used padding in body tag.
@Kyr27
Posted
Add min-height: 100vh
to your body where flex is in order to center it:
body{
background-color: hsl(212, 45%, 89%);
display:flex;
align-items:center;
justify-content:center;
min-height: 100vh;
/*padding:100px;*/
Marked as helpful
@HenriqueCosta05
Submitted
Hello! I am new here, and would like from you: What are the best practices I should have put in this project? Is it possible to build a website for multiple platforms (Desktop, and Mobile) using only CSS and HTML? Thank you!
@Kyr27
Posted
Best practices:
<p> <span class="perfume">P E R F U M E</span></p>
Instead use letter-spacing in your styles.css for that element:
.perfume {
letter-spacing: 0.1875rem;
}
text-decoration: line-through;
Use the <s>
element in your index.html instead which is part of semantic HTML:
<p><span class="discount-price">$149.99</span><s><span class="before-price">$169.99</span></s></p>
rel="noopener"
attribute(for security reasons)Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" rel="noopener">Frontend Mentor</a>.
<span>
to make a new line, it would be a nightmare to maintain.Regarding your question of whether it's possible to build sites using only HTML and CSS for multiple platforms, the answer is yes, and that is the point of this challenge. To build for multiple platforms you should learn Flexbox and/or CSS Grid.
Marked as helpful
@Kyr27
Submitted
I'm not sure if i did ARIA correctly, any help regarding how i can improve it is appreciated.
@Kyr27
Posted
Fixed the left and right side height mismatch that was likely caused by the way flexbox handles paddings and margins behind the scenes, by centering using body instead:
! Don't use this to center the card:
.product-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin-inline: auto;
}
! Use this instead:
body {
min-height: 100vh;
align-items: center;
justify-content: center;
}