@elliottkan
Posted
Hey!
Flexbox is definitely quite a tough beast to love! I like to think about breaking them down into small sized pieces for styling.
- I would add a
max-width
to the container to address the sizing issue instead of using margin.
- You could also remove the div class container OR content since one of the divs are currently not doing anything, I would apply the background colour to the entire html element instead through
*
. By doing this, your.attribution
should sit directly underneath your card.
-
Play around with
@media
so the layout changes for responsive mobile design. You could then applyflex-direction:
to address the change in layout. -
I believe it is best practice to use
em
as opposed topx
for styling to cater for mobile first designs. -
Look at HTML semantics to understand better how to label your content, there are several
h
elements within your.wordings
div. I believe the h4 could be replaced with<p>
but I'm pretty new to this game still. -
could apply a
width:100%
to yourimg
so it fits within container.
I would recommend Kevin Powell to get some better understanding with CSS, he's an absolute weapon
Hope this helps!
@Mojisolasmiles
Posted
@elliottkan Thank you so much, corrections will be made…I am also a beginner 😊