Skip to content
OverviewSolutions
16
Comments
4
R Hayes
@ryanthayes

All comments

  • R Hayes•240
    @ryanthayesPosted over 1 year ago

    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; }

    1
  • h415232•110
    @h415232Submitted over 1 year ago

    Hi all,

    I had difficulty in rounding up the corners of the card. I know that we can use border-radius property to make the corners rounded, however, adding it in my CSS class "card" did not work.

    Wondering what should I do to make the border-radius work. Any answer will do!

    Also, would be happy to hear feedback from anyone to improve my code.

    Thanks! :)

    Solution for 3 Column Prev Card (Not yet responsive)

    1
    R Hayes•240
    @ryanthayesPosted over 1 year ago

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

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

    Marked as helpful
    1
  • Mário Vergara•160
    @mvergara94Submitted over 1 year ago
    • The most difficult thing for me was to work in the responsive layout, any tip would be more than welcome.
    • How can i change the collor of icons, like i used in the footer ( from https://fontawesome.com/icons ) for the hover.

    Huddle Landing page using CSS & HTML only

    1
    R Hayes•240
    @ryanthayesPosted over 1 year ago

    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
    0
  • R Hayes•240
    @ryanthayesSubmitted over 1 year ago

    I was able to practice using CSS Custom Properties and the GitHub workflow. Thanks to initial feedback I was able to improve my HTML semantically and come up with a proper solution to vertically align content.

    My Solution for the QR Component Challenge

    5
    R Hayes•240
    @ryanthayesPosted over 1 year ago

    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;

    0