@karolbanat
Posted
Hi @keziarkts, about your question, the problem probably is that you set fixed width on the .main-card element (width: 700px;). That causes overflow on smaller screens. It is better to not set fixed widths on most of the elements, but if you want to limit the size, you could use max-width. So, here replace width: 700px with max-width: 700px.
Also in most cases (or probably always) its better to not set fixed height on elements and let content determine used space. So here, also, instead of height: 540px use min-height: 540px or just remove that property from .main-card.
Hope it helps. Other than that, your solution looks great. ✨ Congratulations and happy coding. 😊
Marked as helpful
@keziarkts
Posted
Hi @karolbanat! Thanks a lot for your suggestion and your great comments 😊
I quickly made the changes and also added a margin for the mobile part (to really match the original design): body { margin: 60px 20px; }. I don't know if this was really necessary...🤔 But in the end, I think it looks better for the overall code and its result. And thanks, I learned something new today :)
