Skip to content
OverviewSolutions
16
Comments
4
R Hayes
@ryanthayes

All comments

  • R Hayes•240
    @ryanthayes

    That gave me an idea to try. I had been trying to change the main element NOT the pseudo element. I was able to fix by adding vertical-align to the pseudo element:

    .time::before { content: url(images/icon-clock.svg); padding-right: .5em; vertical-align: middle; }

  • R Hayes•240
    @ryanthayes

    Try adding overflow: hidden; to your .card element.

    .card { width: 50rem; height: 28rem; display: flex; border-radius: 1rem; overflow: hidden; }

    Marked as helpful
  • R Hayes•240
    @ryanthayes

    For changing the icons try this:

    .footer__item { color: var(--secondary-color); border: 1px solid var(--secondary-color); }

    Also, your icons are not all perfect circles. I struggled with that at first, too. I used this solution to get mine looking right: https://bostonianadam.com/2019/09/how-to-add-circle-border-around-font-awesome-icon/.

    Marked as helpful
  • R Hayes•240
    @ryanthayes

    Thank you @0xAbdul I updated my HTML so that my generic div container is now semantically correct as <main>. I was also able to center the main content properly using flex box by adding your CSS suggestions below to .container:

    margin:0; height:100vh;