@andrew-j-brown
Posted
Hi Dolapobj!
Looks good, and the site looks perfect for mobile! Good job with using Scss as well, I didn't use it for much more than color variables lol.
The only difference I saw was the sizing of the desktop card. I really struggled with this part of the challenge myself - the easiest way I could find to format it was to style just the aspects that don't affect layout, such as colors and fonts, and then style the layout for each screen width separately. I didn't do this the first time around, and the mobile styling ended up really messing with my desktop layout.
Here's some relevant parts of my css:
/* universal styling */
...
/* layout styling */
@media (max-width: 48rem) {
/* Structures the layout of the mobile card*/
.product-info {
display: flex;
flex-direction: column;
gap: 1rem;
}
}
@media (min-width: 48rem) {
/* structures the layout of the desktop card*/
.product-card {
max-width: 580px;
flex-direction: row;
}
.product-info {
width: 90%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
Also, don't forget to add hover styling to your buttons!
.product-button {
...
background-color: $dark-cyan;
color: $white;
transition: 0.2s opacity;
}
.product-button:hover {
opacity: 0.85;
cursor: pointer;
}
Sorry for the wall of text lol - Hope this helps and have a great day!
