@vanzasetia
Posted
Hi again, Webdevsonu! 👋
Congratulations on finishing another challenge! 🎉
If you are following the mobile-first approach then you will use min-width
media queries. So, there is nothing to be confused about.
Regarding the scrollbar on the card, I recommend making the following changes:
Remove all the code that I commented on.
main {
/* border: 1px solid none; */
note: invalid value "none"
border-radius: 10px;
background-color: hsl(244, 38%, 16%);
/* width: 60vw; */
note: the card needs a max-width, not a width
/* height: auto; */
note: it's already the default behavior
color: hsl(0, 0%, 100%);
/* overflow: auto; */
overflow: hidden;
note: make the image follow the card's border-radius
/* margin: auto; */
}
@media (min-width: 1024px)
.contents {
display: flex;
flex-direction: row;
justify-content: space-between;
/* padding-right: 80px; */
/* margin-top: 80px; */
}
Set all elements box-sizing: border-box
. This way, the padding
doesn't add more width to all elements.
Make the img
as a block element and set max-width: 100%
. It makes working with img
easier. Then, set width: 50%
to the image.
By doing those things, the overflowing should disappear. But, the card needs more adjustments to be responsive. I recommend simplifying the styling.
I hope this helps. Happy coding!
Marked as helpful