@VCarames
Posted
Hey @webdevhill! Thank you for the mention! I appreciate it!
The code was definitely improved! Great job! Unfortunately , some parts were overcomplicated, so I made some adjustments to you code (some minor adjustments are still needed);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Outfit', sans-serif;
background-color: hsl(212, 45%, 89%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.main {
max-width: 320px;
background-color: hsl(0, 0%, 100%);
padding: 15px;
border-radius: 10px;
text-align: center;
}
.img {
max-width: 100%;
border-radius: 10px;
}
.header {
padding-top: 15px;
font-weight: 700;
line-height: 1.5rem;
}
.body-text {
padding: 15px 0 25px 0;
font-size: 15px;
font-weight: 400;
color: hsl(220, 15%, 55%);
}
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding! 🍂🦃
@webdevhill
Posted
@vcarames It was overly complicated due to the fact that I built it at 1440px instead of mobile First! Then on my 24" monitor thing were breaking @1600px.
I saw some very simple solutions that were built at 375px and were the perfect size in the 1440 screenshot. There were not actually responsive below 375 but were effective at satisfying the parameters of the style guide and provided screenshots.
Thank you for your time
@VCarames
Posted
@webdevhill
The reason it was breaking was because you were using viewheight and percentages for your components containers.
They were most likely using width instead of max-width ( It is common mistake for this challenge)
The code I provided was meant to show you that you can achieve the same results with less code. The less code the better. Less maintenance and a faster loading site.
Marked as helpful
