@joaotextor
Posted
Hello, Marsha. I hope you had a good time making this solution. I know I did making mine. So, I noticed something that could be a very good tip for your project, and it will help the elements in getting straight in line with each others.
When creating elements that should stay side by side and be responsive, it's a good idea to put them inside a div (just like you did in <aside> tag).
To better exemplify, here's a screenshot: https://imgur.com/a/2Sjw5Zt
You see that, in this screenshot, I created a <div> to put the other elements. It's easier to organize all the elements inside a div using flex/grid display. So, in the first div group you can use flex-direction row (which is default).
The second group of divs (blue) will stay side by side because of div 1 (green) being flex.
On the third group of divs (pink) you will accommodate the remaining objects. The first pink div (which has the image) can have a flex-basis of 100% so it always remain on top of the other 2 (using the row direction), as long as you have your flex-wrap set to "wrap".
In my project, I used flex display on all of those divs, but I suppose you can play with grid display to have the same effect.
You can also use divs organize your other elements below (the number 1, 2 and 3 headlines and images.)
I hope I could make myself useful. Good job and keep going :-)
