Design comparison
Solution retrospective
This was my first attempt with use of a media query. Any feedback on @media rule would be greatly appreciated. Any other constructive criticism is welcome as well. Thanks all!
Community feedback
- @Sam-GulikerPosted almost 3 years ago
Hi Walker,
Nice solution you've got there. The main doesn't really need a role since the html is already telling that it's a main.
For the design you are really close. Try to play a bit with paddings and you can do a "50/50" width solution.
Happy coding.
Marked as helpful1@walker861Posted almost 3 years ago@Sam-Guliker thank for the feedback! I forgot about changing the role. That was originally a div element.
For the design issue, I normally have the screenshot opened and viewed as actual size. I will get it looking pretty accurate then upload and end up with some sizing issues. Is there a better way to do it to achieve a better layout?
1@Sam-GulikerPosted almost 3 years ago@walker861
Did you check the styles-readme? I would do something like this for the layout:
<main><div class="text-container">{content}</div><div class="image-container"></div></main>The text-container and image-container should have a 50% width. (ps you can check my solution)
Most of the time I just get the design, scale it out on my webbrowser like an overaly and just keep adjusting it until I see almost no difference.
I hope this was helpful :)
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin 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