Victoria Azola Silva• 1,290
@VickyAzola
Posted
Hi there! 👋 Awesome job completing this challenge.
The media query seems fine to me.
The only thing that seems different compared to the design is the price on mobile; there, the flex-direction: column; is not necessary:
@media screen and (max-width: 768px) {
.....
.price-block {
gap: 0.5rem;
margin: 1rem 0; ---> added to separate from the text and button
}
}
And for the button, you can achieve the alignment by giving it a display of flex and deleting the class on the image. Here is an example:
button {
---- added -----
display: flex;
align-items: center;
justify-content: center;
column-gap: .8rem;
-----
width: 100%;
padding: 1rem;
font: inherit;
font-weight: 600;
color: var(--white);
background-color: var(--dark-cyan);
cursor: pointer;
border: none;
border-radius: 0.5rem;
}
--- Delete this one ----
.icon-cart {
width: 0.75rem;
vertical-align: middle; /* Aligns strangely, not in the middle */
margin-right: 0.5rem;
}
Hope this helps!
0
