Here is my solution for the Results Component challenge. I spent a little more time on it than I wanted to but I am proud of the end result. My biggest opportunity that is staring me in the face is writing excess code. I know that there is easier/cleaner ways to write/create what I have and that is the feedback I am seeking. Thanks everyone.
Updated landmarks recently. Thanks for the feedback again!
I was unable to make the image div and the information div the same size so there is a slight difference at the bottom where they should be flush. I would appreciate any help in fixing this issue along with any others that are spotted. Any feedback is appreciated, thanks in advance!
Edit: Changes from feedback have been implemented.
@AhmedAlkh Great attempt! Let me share with you what I learned doing this to help you with you improper sizing problem.
Use your <main> as the initial container and set the width to 100%, don't forget to set the justify-content and align-items to "center".
Set up a container div with your image and content inside the <main>.
Utilize the semantics in the HTML to connect the CSS instead of making a class or div for everything. This keeps your code smaller and easier to read.
As for changing the display when the viewport changes, you can use @media in CSS to change the flex-direction to column instead of row for smaller screen sizes.
I used the same advice on a similar project which you can view here: https://github.com/OpenWorldProjectOWP/BetterDev4
Great job and Happy Coding! Hope this helps.
Hey Bruno, great job with this challenge! I just completed this one myself and something I learned that I think is a good takeaway for you as well was: Use the "main" section as a container itself and by giving it the property "flex" you can then center the "container" div which places everything nicely in the middle of the page. That small change has a huge impact on the finished projects appearance. Feel free to view mine and leave me feedback. I left mine unedited so that I can continue to receive advice on the original attempt.
