@darryncodes
Posted
Hi Senay,
Great effort - looks pretty close to the design!
- i've found fixed height plays havoc with responsive design, i don't think you need it, just bring in your media query in sooner.
max-width
would be sufficient - i'd opt for
transform: translateY(2rem);
instead of position - you could use a
<main>
on your<div class="container">
this will clear up your accessibility report, semantic html is really important too
Good luck and keep coding!
Marked as helpful
@Senay-Fekadu2
Posted
@darryncodes thanks bro it means a lot and I've learned a lot in these challenge I've used margin instead of positioning it was better than positioning but it is not responsive enough and it lost its structure on the way . but as you say I will check out transform property and also I need to know more about the semantic html because am not comfortable with it yet that is why I am avoiding it but if it is the way to go then am going in
@Senay-Fekadu2
Posted
@darryncodes but about the max-height and min height what should I have done If I let it be responsive the three container have different content and they won't sync up one would be shorter at times and other time equal size
@darryncodes
Posted
good to hear you've learnt a lot @Senay-Fekadu2. Yeah margin will get messy too, makes you work harder responsively.
In answer to your second question you've already done it. Setting users-testimony row
to display: flex;
and .col
to flex: 1;
. flex: 1;
is shorthand for flex grow/shrink/basis and it's performing all the magic.
Marked as helpful