R Hayes• 240
@ryanthayes
Submitted
For the clock icon before 3 days left, I can't figure out how to align it vertically with the "3 days left" text.
R Hayes
@ryanthayes
All comments
- R Hayes• 240
@ryanthayes
Posted
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
@h415232
Submitted
Hi all,
I had difficulty in rounding up the corners of the card. I know that we can use
border-radiusproperty 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-radiuswork. Any answer will do!Also, would be happy to hear feedback from anyone to improve my code.
Thanks! :)
R Hayes• 240@ryanthayes
Posted
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
@mvergara94
Submitted
- 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.
R Hayes• 240@ryanthayes
Posted
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
@ryanthayes
Submitted
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.
R Hayes• 240@ryanthayes
Posted
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
