Skip to content
OverviewSolutions
9
Comments
3
Brine
@brinereef1

All comments

  • Brine•140
    @brinereef1Posted over 1 year ago

    Congrats on successfully completing this project

    You did a good job and it's looks really great

    Just a small suggestion, you can use media query at max-width 401px to change the margin of h1 and p inside article element to margin-block, it will avoid taking extra white space

    @media only screen and (max-width: 401px) {
h1 {
margin-block: 1.5625rem
}

p {
margin-block: 0.875rem;
}
}
    Marked as helpful
    1
  • Brine•140
    @brinereef1Posted over 1 year ago

    Congrats on complete your first project.

    I have one suggestion, your design is breaking on 375px width device

    So you can try both min and max media screen to 375px.

    @media only screen and (max-width: 375px) 
@media only screen and (min-width: 375px)

    Apart from that your solution is great 👍

    Good luck

    Marked as helpful
    0
  • Brine•140
    @brinereef1Posted over 1 year ago

    It looks great, only one suggestion to align the icon with the word

    you can use

    <div class="skill reaction">
<div>
<img src="./images/images/icon-reaction.svg" />  
<p>Reaction</p>
</div>
</div>

    for all your four skills and in the css file

    .skill div {
display: flex;
align-items: center;
}
    1