What are you most proud of, and what would you do differently next time?
Nothing
What challenges did you encounter, and how did you overcome them?
When I view the project on my cell phone, the second container is not underneath, but on the side
What specific areas of your project would you like help with?
I need someone to explain why my second container is on the side and not underneath
@SvitlanaSuslenkova
Posted
Looks like a lot of suffering... You should have added flex or grid to main and remove margin from section. You added flex to image div, maybe you just ment main? Also, I think you don't need tag header here.
@beowulf1958
Posted
Congratulations on coming this far in the challenge. Your styling is great, only the layout needs some work.
First, center the content on the page with flexbox:
body {
font-size: 62.5%;
background-color: #ffe;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
Next, as @SvitlanaSuslenkova said, add flex to the main:
main {
width: 40rem;
display: flex;
}
Remove margin and width from container. You may need to fix the image.
img {
display: block;
width: 100%;
}
/* Mexendo na div da imagem */
.imagem {
/* display: flex;
justify-content: center; */
/* margin: 8rem 0 0 0; */
height: 24.2rem;
border-radius: 0.5rem 0 0 0.5rem;
overflow: hidden;
}
Now this is important. In the media query, don't repeat yourself. If the style doesn't change, don't rewrite in the the media query. Only put what changes in the media query.
@media screen and (max-width: 480px) {
main {
width: 20.1rem;
flex-direction: column;
align-items: center;
justify-content: center;
}
.imagem {
border-radius: 0.5rem 0.5rem 0 0;
}
.Container {
border-top-right-radius: 0;
border-bottom-left-radius: 0.5rem;
}
}
Now your project looks great!
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
