Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
Mostly I am proud of the mobile page I made using media query. It was a fun experiment that ended up working just like I intended.
@media only screen and (max-width: 480px) {
body {
margin: 0;
}
main {
width: 100%;
margin: 0px;
border-radius: 0%;
padding: 0 0 30px;
}
img {
display: block;
border-radius: 0%;
margin: 0;
width: 100%;
height: auto;
}
}
Next time I would try to shorten the style.css, as it got quite long.
What challenges did you encounter, and how did you overcome them?First I had problems with getting the main element to display properly. The problem was solved when I realised I had set the page height too small.
The next major problem was with the mobile page. I couldn't get the image to display at the top of the page, but ultimately I just had to tweak padding and margins a bit.
Join our Discord community
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